Ok, I may need an English language refresher… But the point I was trying to make was that yes, there is a way to switch the number of columns in the WooCommerce shop page, however that’s static.
What if I wanted to show 5 columns of products on large desktops, 4 columns on desktops, 3 on tablets and 2 on smaller devices? Well, this “dynamic” behavior is – this time around – managed by CSS. Let’s see how it’s done!
Continue reading WooCommerce: Switch Shop Columns Responsively
If you’ve taken the ConfigureWoo online course, you’ll know that WooCommerce adds its own “WordPress Customizer” section called “WooCommerce”, indeed. From there you can manage some settings such as the store notice, product images, checkout fields and so on.
What if you want to add your own settings, and let yourself or your client toggle options or type input values, so that this can be applied to your current WooCommerce website? Well, that’s quite doable, so in this post we’ll see how they do it. Enjoy!
Continue reading WooCommerce: Add a WordPress Customizer Setting
The standard layout for the WooCommerce single product page features the main/featured product image on the left and the title/add to cart on the right. But what if you need to turn that image into a hero one i.e. a full width featured image, and push the title and add to cart button under it?
Well, for once, we’ll take a look at a CSS-only snippet. Sometimes the easiest things are also the ones that work brilliantly. Enjoy!
Continue reading WooCommerce: Full Width Featured Image @ Single Product Page
A Business Bloomer fan asked me an interesting question this week: how to apply CSS on the single product page based on the product category? Well, the answer is pretty simple: if we’re able to add the category name to the HTML “body”, this can then be targeted in your custom CSS. So, let’s see how this is done!
Continue reading WooCommerce: Product Category as Body Class @ Single Product Page
I have a very long to-write list. Possibly I have enough content for another 2 years 🙂
However, the other day a premium WooCommerce student asked me for some feedback on his custom CSS – so I had to give it priority! The request was: what’s the easiest way to change the little icon/button on the Cart page that has the function of removing items from the cart (yes, that ugly white cross on a red circle)? Continue reading WooCommerce: Change the “Remove this Item” Icon @ Cart
There are times when you really want to do things right, you have a 5-figures budget and all the time in this world: you might want to override the whole WooCommerce CSS by disabling it completely, and applying your custom styles instead.
Despite this is an unusual task, I’ve researched the topic and here are my findings. Enjoy!
Continue reading WooCommerce: Disable Default WooCommerce CSS
Unlike your WordPress theme, you can’t just add CSS to your style.css in order to customize the look of the WooCommerce emails.
This handy PHP snippet is therefore the only viable solution. It’s a little tricky but once you get the idea, adding CSS to Order Emails is a breeze.
Continue reading WooCommerce: Add CSS to Order Emails
There are plenty of reasons why you might want to remove certain columns—like the subtotal—from the WooCommerce Cart table.
Sometimes it’s about simplifying the shopping experience. The fewer distractions your customers face, the more likely they are to complete their purchase.
A cleaner, more focused WooCommerce Cart page can improve usability and reduce confusion, especially on mobile devices where space is limited.
Other times, you might be working with specific design or business requirements that call for a more minimal cart layout.
While WooCommerce gives you the flexibility to achieve this with PHP, using CSS is often a faster and easier approach, especially when you only need to hide visual elements without affecting functionality.
This method is non-destructive and easy to reverse, making it ideal for quick changes or tests. If you’re looking for a quick way to hide a cart table column, here’s a simple CSS snippet to get it done.
Continue reading WooCommerce: How to Hide Cart Table Columns
Many custom CSS rules, especially when using the Divi theme, rely heavily on the !important declaration to override default WooCommerce styles.
However, this creates a major challenge: once !important is applied, adding another !important in your custom CSS won’t help—you can’t out-prioritize it. In this battle, Divi’s styles will always win.
Regardless of how well or poorly Divi’s code is written, there are still ways to regain control.
Just keep in mind that relying on !important is generally considered poor practice in CSS and should be used with caution, as it often leads to maintenance issues and conflicts down the line.
This is an interesting topic. A WordPress/WooCommerce client could not add CSS via the usual way. In fact, Gravity Forms plugin (and in particular the “directory” extension), stores entries in the database BUT the directory page and the entries filtered list have the same classes, ids, and cannot be “targeted” with CSS.
Long story short, and Gravity Form or not Gravity Form, here’s the snippet you can use to add CSS to any WordPress page as long as you know its URL.
Continue reading WordPress: How to Add CSS to a Specific URL