Browser: Chrome 110
OS: Windows
I have a template to show a Woocommerce product on various pages on my website. This includes the add to cart/select options button added as a dynamic data {woo_add_to_cart}in a text element.
On any ânon-woocommerceâ pages this shows up with correct styling but on pages such as product archive and shopping cart diffrent syling is applied. Refer to the screenshots below.
Home page - Correct styling
Product Archive - Incorrect styling
Hi Mike,
Thanks again for your report!
Again, a live link would make it easier to see where you have defined which styles so that I can tell you what you need to overwrite/adapt.
Best regards,
timmse
Below two relevant links:
Home page - correct: https://foox.style/
Archive page - incorrect : https://foox.style/product-category/jongens/
Thanks for the links!
I agree with you that the styling should be the same everywhere - both for the dynamic data tag and for the add to cart element.
Especially if you have created custom styles for the WooCommerce button in the theme styles. These should determine the styling everywhere.
You can temporarily fix this by assigning the .woocommerce class to the section containing your products on the non-woocommerce pages. Then the styles follow the theme styles » woocommerce button settings, and you can style them globally.
Applying the .woocommerce class indeed helps to make the styling consistent across all pages where the template is used. Unfortunately this removes flexibility to have the add to cart button / select options button in the template styled differently from other WooCommerce buttons. How could I address this?
Let me explain this one a little bit.
Your homepage does not have the .woocommerce class.
The style of woocommerce button is made .woocommerce . button {style:style) but as the homepage does not have woocommerce in the body class, this wonât work in homepage, to fix this you can add the following css.
.home .product_type_variable {
background-color: var(âprimary);
border-radius: var(âradius-s);
color: var(âtext-inverted);
text-align: center;
padding-top: var(âspace-s);
padding-right: var(âspace-s);
padding-bottom: var(âspace-s);
padding-left: var(âspace-s);
align-items: center;
border-width: 0;
display: inline-flex;
font-weight: 700;
justify-content: center;
min-height: 40px;
padding: 7px 15px;
text-align: center;
text-decoration: ;
}
This will work only on homapge, some changes are required if you want the code to be working on other pages that are not woocommerce pages, this will also work only with variable products, some changes will be required in order for it to work with simple products too. You can put the code in the homepage CSS ori your style, anywhere works.
This is a screenshot of the result.
To style the button the same as on all other woocommerce buttons the same result can be achieved by adding the â.woocommerceâ to the element. Refer to the image below.
However what I need is this specific button to be styled differently form the other woocommerce buttons regardless on what page it is displayed. The desired styling is applied in the template but not displayed on any âWoocommerce pageâ since the .woocommerce class seems to be added for some reason.
At first glance, I would add a custom class and style it using custom CSS, where I can make my custom class more specific so it is âstrongerâ than .woocommerce .button. Check the front end, see where your class applies and chain the selectors accordingly, so it gets a higher specificity.
This indeed solves my problem, thanks for the help! 
Nevertheless I do still find this behaviour quite strange. Shouldnât this be addressed?
Hi guys,
Weâve fixed this issue in Bricks 1.11.1, now available as a one-click update in your WordPress Dashboard.
Changelog: Bricks 1.11.1 Changelog â Bricks
Please let us know if you are still experiencing issues.
Best regards,
timmse
