Add to Cart button styling

Support
#1

Hi,

I want to ask you something about Woocommerce Add to cart button. On a single product page, I understand that Wooccommerce button styling overrides that of theme’s. However, if we use a woocommerce element/plugin in shortcode, for example [add_to_cart id=“product ID”] I saw that the styling of the button comes from the theme, not from Woocommerce. You can test this. In my case (Pro latest version) this is what is happening.

If this is the case, is it possible to change default styling of a button element, considering that it is a woocommerce button and its style comes from the theme?

Thank you!

#2

Hi Gunes,

Yes, you can change it on Theme Options > Buttons:

Theme_Options_Pro (1)
Theme_Options_Pro (1)370×824 12.3 KB

Note that those settings will affect the buttons styling on your entire site. If in case you want this changes specific to woocommerce button only, that is possible with custom CSS that can be added in Theme Options > Global CSS.

Here’s your guide:

Hope this helps.

#3

Hi Lely,

Thank you for your response and the links. I need to make very few modifications on the default styling of the default theme button, and I want those changes to be global.

On Theme Options > Buttons, we can only change the colors, but I am already using default theme colors, instead I need to change the font size and weight, and may be the margins, and they cannot be changed from here.

I am not a developer and cannot learn CSS in the short term. It appears that I need to hire someone to do this minor styling but I am wondering if you have another suggestion or a previous thread that would be helpful.

Thank you

#4

Hi Gunes,

If you are not comfortable adjusting it using the guide shared previously, you might want to check our ONE service. It covers what you need here or if in case you want developers on demand, please try ELITE.

#5

Hi Lely,

Can I use a third-party theme with Pro, or should I use Cornerstone?

#6

Hello Gunes,

Pro theme is a premium WordPress theme. It has a custom header, footer, and a content builder. The content builder which is the Pro Editor can be used to create page and post content layouts. If you are going to use a different theme such as Flatsome, all of the builders in Pro theme will no longer be available because it is integrated into the theme. If you need a page builder while using a different theme, you may use the Cornerstone plugin instead.

Pro theme supports WooCommerce 100%. Just take our Crafty demo site as an example here:

The Crafty demo is powered by Pro theme and WooCommerce. While it is using the default Pro theme header, the footer is powered by Global Blocks which is also a feature in the theme. The shop index, product archives, and product pages were using the Integrity stack layout with a little CSS. We would like to point out that the Pro theme supports WooCommerce. Our forum support covers getting your site set up, bug fixes, troubleshooting, and giving the users some guidance on how to use the theme. Any customizations such as adding a custom CSS/JS/PHP code in modifying any of the WooCommerce element is beyond the scope of our support already.

Please do check out our One service to help you with your customization questions.

Hope this helps. Thank you for your understanding.

#7

Ruenel, thank you for your detailed reply.

#8

Hey Gunes,

I’d first answer your concern about the Integrity stack and Crafty demo. If you like the Crafty design, you need to install Crafty in the Design Cloud so the prewritten custom CSS of Crafty will be loaded to your Global CSS.

image
image674×621 54.7 KB

Regarding our One service, according to our One sales page, yes, you can ask customization questions.

image

Hope that helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.