Enhance user experience with Google Optimize by conducting A/B testing on

I am seeking advice on Google Optimize CSS code. My goal is to perform A/B testing on button colors throughout my entire WordPress website at www.interica.si. When I make changes to the CSS code in the edit mode, it seems to affect all buttons, but when I launch the test, it only changes the Index page. Can someone assist me with this issue? Is there a way to use Javascript for a global change? Any help is appreciated.

Thank you.

Below is the code snippet:

.checkout-button button alt wc-forward .current .breadcrumb-step, [data-icon-label]::after, .button#place_order, .button.checkout, .checkout-button, .single_add_to_cart_button.button, .button.single_add_to_cart_button, .button.is-outline, input[type="submit"].is-outline, input[type="reset"].is-outline, input[type="button"].is-outline {
  border : 0.25px solid rgb(0, 0, 0) !important;
  background-color : rgb(209, 10, 40) !important;
  color : rgb(255, 255, 255) !important;
}
javascripthtmlcssoptimization

Answer №1

the CSS code that is shared appears to be working perfectly.

.checkout-button button alt wc-forward .current .breadcrumb-step, [data-icon-label]::after, .button#place_order, .button.checkout, .checkout-button, .single_add_to_cart_button.button, .button.single_add_to_cart_button, .button.is-outline, input[type="submit"].is-outline, input[type="reset"].is-outline, input[type="button"].is-outline {
  border : 0.25px solid rgb(0, 0, 0) !important;
  background-color : rgb(209, 10, 40) !important;
  color : rgb(255, 255, 255) !important;
}

Kindly open your preferred Container and navigate to the Details tab.

To address the issue you're facing, please proceed with the following steps:

1. Step: Navigate to the Page targeting section and click on "Edit Condition".

2. Step: Set Host to does not contain

3. Step: Enter your desired website address and save the settings.

This should resolve the problem. If you have any queries or encounter any difficulties, please don't hesitate to reach out to me.

Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to determine if an item in an array is not empty?

Let's consider an array: arr = [{}, {}, {}, {}] If we want to determine the length of the array by counting only objects that contain at least one property, we can do this: [{}, {name: "Manchester United", odds: 3}, {}, {}] // 1 [{}, {name: "Liver ...

javascriptarraysjson

Creating Structure with Highcharts - Sorting Through Unprocessed Data

In reviewing various demos of highcharts, I noticed that they all tend to adhere to a fairly straightforward data structure: Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15 However, the data I have doesn ...

javascripthighcharts

Incorporating a JavaScript script into my Angular 7 project

My project requires me to incorporate the "Loadingbar.js" library into one of my pages. You can find this library here: . Initially, I inserted the CSS code into my global "style.css" file. I started by placing the script in my index.html file: <script ...

javascriptangularinstallationshared-librariesangular7

"Enhance user interactions: Zooming in on input fields in

Currently, with the latest version of iOS (14.4), there is a zoom effect on any input box that receives focus, unless the input has a font size of 16px without focus. While this may not seem like an issue initially, once focus moves away from the input bo ...

htmlcssios

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

After receiving a JSON Array as a response Object from my Java application, I aim to extract each object and display it on the corresponding HTML page using TypeScript in Angular. list-user.component.ts import { HttpClient } from '@angular/common/h ...

javahtmlangulartypescriptjsonobjectrequest

Is there a way to modify a specific key value in all embedded objects using Mongoose?

I'm currently working on a chat application and I'm facing a challenge with implementing the 'seen' functionality. I need to update all chat messages in the database by setting the 'seen' column to true. Here is the schema st ...

javascriptnode.jsmongodbexpressmongoose

ensuring that there is no wrapping and the children have a width of 100%

Would you like to have text inputs placed in a single line inside a div without manually setting their widths? <div> <input type="text" /> <input type="text" /> <input type="text" /> </div> div { width: 300px ...

css

Incorporating an HTTP-based IFRAME into an HTTPS web address

My situation involves a PHP application running in HTTPS mode, within which there is an iframe containing an HTTP file. Both the parent and the iframe exist within the same domain. Strangely, I am unable to access the iframe source using HTTP. Is there a ...

phpjavascriptiframe

focusing on two different sections with a single hover effect

Is it possible to modify the styles of two different divs using CSS when hovering over one div? #down-icn { position: absolute; bottom: 0; right: 25px; color: #fff; -webkit-transition: color 0.25s ease; border-color 0.5s ease; -moz-transition: colo ...

htmlcss

Can you demonstrate how to repeatedly increase a running total using a for loop until the loop ends?

Looking at the for loop. The goal is to have the interest calculated based on the latest value variable. Currently, the script generates the same interest rate and value for each year. What I desire is for it to use the previous value variable to determine ...

javascript

Why won't the CSS update in Next.js when the local state variable changes on page load?

I seem to be facing an issue with a variable stored in localStorage that changes when using a toggle button. The color changes correctly upon toggling the button, but upon page refresh, it doesn't display the correct color saved in local storage. Eve ...

javascriptnode.jsreactjsnext.jstailwind-css

Unlock the Power of TWBS Ratchet: Manually Closing Modal Windows

Currently, I am in the process of developing a mobile web application using Ratchet. The main task at hand involves opening a modal, filling out a form, clicking a button to save the input data, and then closing the modal. Although I have managed to close ...

javascriptangularjsratchetratchet-bootstrap

Encountering issues when trying to access a property after setting an EJS variable in

Whenever this code runs, an interesting type error occurs within the if statement. It says: Cannot read property product.thumbgallery1 of undefined. var urlArray= []; var product = '<%- product %>'; console.dir(product); ...

javascriptjsonexpressejs

Error: The function row.child.hasClass is not a recognized function

My challenge is creating row details for DataTables without using Ajax. I have implemented something like this: $(document).ready(function () { function format ( name, value ) { return '<div>Name: ' + name + '<br /> ...

javascriptjquerydatatable

In a Vue.js application, parameter passing does not function as intended

As someone who is new to JavaScript, I have a question regarding Vuex and creating a simple Todo Manager. I am facing an issue with deleting todos from my list and not getting the desired parameter (the id of the todo) in my actions. Here is the code snip ...

javascriptvue.jswebparametersvuex

How does NodeJs handle ongoing tasks and processes seamlessly?

One interesting concept is the Event Loop, which accepts callbacks and executes them as needed. As far as I understand, this operates on a single thread event loop, meaning only one callback is executed at a time. Consider the following example: setInterv ...

javascriptnode.js

Conceal or reveal input elements with a toggle function in jQuery by utilizing

When the user chooses an option from a dropdown list, I want to display or hide different input fields accordingly. I attempted to use toggle with boolean values, but it doesn't seem to be working as expected. I expect that if I send 'true' ...

javascriptjquery

The header in the fetch() function is displaying as application/x-www-form-urlencoded rather than the expected application/json

Update #2: The issue has been resolved, you can find the solution in my own answer (which I am unable to accept at this time). I have a React application running on Heroku with a node.js backend via Express. In the frontend, I am attempting to send a POST ...

javascriptjsonnode.jsherokufetch-api

Merging Text within the Yii Framework

Can someone explain the process of combining strings in this code, specifically for first_name and last_name? Thank you in advance for your assistance. <?php /* @var $this AuthassignmentController */ /* @var $data Authassignment */ $datamodel = (Memb ...

phphtmlyiistring-concatenation

Incorporate SVG files into a TypeScript React application using Webpack

I am trying to incorporate an SVG image into a small React application built with TypeScript and bundled using Webpack. However, I am encountering an issue where the image is not displaying properly (only showing the browser's default image for when n ...

javascriptreactjstypescriptsvgwebpack