Woocommerce buttons

Support
#1

Hello,

I have some woocommerce buttons I’d like to change the size of. They are on the page titled Email Marketing. My site is under construction so I will include the login details in a secure note. The buttons I want to change the size of are in Section 4. I’ve included a screen shot of the buttons. How can I change their size?

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

.el40.x-bar-content-area a.button.add_to_cart_button {
    font-size: 14px;
}
@media (min-width: 768px) and (max-width: 1024px){
    .el40.x-bar-content-area a.button.add_to_cart_button {
        font-size: 12px;
    }
}
@media (max-width: 480px){
    .el40.x-bar-content-area a.button.add_to_cart_button {
        font-size: 12px;
    }
}
@media (max-width: 320px){
    .el40.x-bar-content-area a.button.add_to_cart_button {
        font-size: 10px;
    }
}

Let us know how it goes!

#3

Hey, It unfortunately does not seem to have had any effect. What can we do?

May I ask, where do you find the ‘el40.x-bar…’? How does one discover that this is the line we want?

#4

Hello @steve,

Thanks for updating the thread. :slight_smile:

Can you please clear browser cache as on my end changes are getting reflected. Please see screenshot. https://cloudup.com/cK63FMiGrHP

You can you Google Chrome dev tools to find the Id of underline section (https://cloudup.com/cGmtdgGQmHj). I am sharing few resources that you can refer to get started with chrome dev tools.


Thanks.

#5

When I preview the page the buttons have changed and are change if I change the css settings for them. In the editor the buttons are the same. How can I correct the view in the editor?

Thanks for the resources!

#6

Hi,

Yes, it’s because CSS added in Theme Options > CSS are being rendered on the front end and not in the editor.

You can add your CSS in Cornerstone Builder > CSS if you want to see the changes in the editor.

Thanks

#7

Hello,

This is not changing the buttons sizes at all.

#8

Hi there,

I checked both the builder and the front end and the size of the buttons did change comparing the original screenshot you gave us:

If you have additional tweaking request you need to be more precise and give us detailed information about what you want so that we can provide you the proper suggestion.

Thank you.

#9

They haven’t changed on my end. I’ve viewed them in both firefox and chrome.

#10

I just changed the button size in the theme options for all buttons.

#11

Hi there,

You need to check this with other browser and other machines, it seems that your browser has a cache. Both I and my colleague did see the change. Test the case with another machine.

By the way, you change the size of the button in the theme Option is not related to this question. We already gave you a CSS code to override any option. If you want to change the size you need to do it in the CSS code that we provided.

Thank you for your understanding.

#12

Maybe I’m not clearing my cache corretly. I’ve cleared it in my browser. Do I need to contact Bluehost and have it cleared there as well? Is there another place to clear?

#13

Yes, please contact your host. WordPress out of the box does not have caching setup so there is no other place to clear cache other than what you and/or your host install in your system.

Thanks.

#14

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