WooCommerce: Switch Shop Columns Responsively

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

WooCommerce: Add a WordPress Customizer Setting

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

WooCommerce: Full Width Featured Image @ Single Product Page

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

WooCommerce: Change the “Remove this Item” Icon @ Cart

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

WooCommerce: How to Hide Cart Table Columns

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

WooCommerce: How To Override !important CSS

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.

Continue reading WooCommerce: How To Override !important CSS

WordPress: How to Add CSS to a Specific URL

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