Single Product Page Archives - Page 7 of 9

WooCommerce: Change Add to Cart Quantity into a Select Drop-down

The default WooCommerce Add to Cart “Quantity Input” is a simple input field where you can enter the number of items or click on the “+” and “-” to increase/reduce the quantity.

A freelance client hired me to turn that input into a “Select” drop-down. For their audience and UX requirements, it makes sense to let their customers choose the quantity from a drop-down instead of having to manually input the number.

Online there are complex snippets, but I decided to make things easier. The WooCommerce function responsible to generate the quantity input is called “woocommerce_quantity_input“.

Luckily, it’s a pluggable function – which means we can simply add this exact same function name to our child theme’s functions.php to completely override it. Enjoy!

WooCommerce: Get Product Data (ID, SKU, $) From $product Object

I’ve been wanting to publish this guide for a long while. As a WooCommerce development freelancer, every day I repeat many operations that make me waste time… and one of them is indeed “How to get ____ if I have the $product variable/object?“.

For example, “How can I get the product SKU“? Or “How can I get the product short description“? Or maybe the product stock level, shipping class, tax class, price, regular price, sale price, and so on… hopefully this article will save you time.

Of course, not always you have access to the $product global – but you may know the $product_id. In this case, you can use the wc_get_product WooCommerce function to calculate the $product object – you find this case scenario below.

Other examples might be the order or the cart page. Once again, in here you don’t really have a $product available, so you have to loop through the order/cart items and “get” it. After that, you can then calculate and get any piece of information you require out of $product. Enjoy!

WooCommerce: Show Video Instead of Product Images

This week’s snippet is a very easy – yet helpful – one. Many ecommerce entrepreneurs prefer to display a YouTube video instead of a static, boring, featured image and product gallery.

Of course, not all products are created equal. So, let’s see how to make this work for a specific product ID only. Enjoy!

WooCommerce: Edit Add to Cart Default, Min, Max & Step Product Quantity

Yes, there are many plugins that already achieve this. But my goal at Business Bloomer is to save you from plugin conflicts, delicate updates and to make you learn some PHP.

So, here’s how you can add, with a few lines of PHP, a minimum, maximum, increment and default value to your Add to Cart quantity input field on the single product and cart pages. Who knew it was this easy?

WooCommerce: Change No. of Thumbnails per Row @ Product Gallery

WooCommerce 3.0 completely revolutionized the single product page featured and product gallery images, including their PHP. If, in the past, a simple filter from WooCommerce was enough to change the number of thumbnails per row (https://docs.woocommerce.com/document/change-number-of-thumbnails-per-row-in-product-galleries/), this does not exists anymore 🙁

So, let’s see how we can achieve this in WooCommerce 3.0 and above. For this example we’ll use two themes – in fact some theme-specific CSS is also needed together with the PHP.

WooCommerce: Disable Grouped Product Price Range $$$-$$$

You may want to disable the Grouped product price range on the Shop and Single Product page. This usually looks like $100-$999. With this snippet you will be able to display “From: ” in front of the minimum price, or otherwise completely hide it 🙂

WooCommerce: POA / Call for Price @ Single Product

You might want to show a “POA” price and/or a “Call for Price” button when you have a product with an empty price.

Many businesses require this, mostly real estate and wholesalers. So let’s see how it’s done 🙂

WooCommerce: Add “Quantity” Label in front of Add to Cart Button

Here’s another little WooCommerce tweak for your website user experience: let’s add some text in front of the Add to Cart button that says “Quantity: “.

As usual, we go looking for the right “hook”… the WooCommerce plugin is full of them and adding some custom content in the exact position we want is very easy. Enjoy!

WooCommerce: Disable Jetpack Publicize for Products

When you enable the Jetpack plugin and its “Publicize” module, WordPress posts get automatically shared to the social media you pick.

This, of course, includes also WooCommerce posts -> “products”. Well, what if you want to deactivate this function? Continue reading WooCommerce: Disable Jetpack Publicize for Products

WooCommerce: Hide SKU @ Single Product Page

This is a very common task. As a WooCommerce store manager, sometimes you need to hide the SKU field on the single product page, while keeping it in the backend (Product Edit page) for order tracking and product import/export purposes.

Here’s a simple snippet you can use to remove the SKU immediately 🙂

WooCommerce: Rename “Description” Title @ Single Product Page Tabs

For once, this is a PHP snippet I use on my own website 🙂 In here, I’ll show you how to change the “Description” H2 Heading in the description tab on the single product page. Enjoy! Continue reading WooCommerce: Rename “Description” Title @ Single Product Page Tabs

WooCommerce: Product Enquiry Form @ Single Product Page (CF7)

A client asked to show a “Product Inquiry” button on the Single Product Page which would display, upon click, a Contact Form with an automatically populated subject (Contact Form 7 plugin must be installed of course). Here’s how I did it!

WooCommerce: Rename “Tags” Label @ Single Product Page

A #CustomizeWoo student reached out for premium support in regard to “WooCommerce taxonomies”. The question was: How do I change the label “tag” into something else, for example “brand”? Well, this is how it’s done!

Please note that this does not change the “tag” permalinks (URL, slug, etc), but only the “Tags” label on the frontend, and only on the Single Product Page.

WooCommerce: Product Category as Body Class @ 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!

WooCommerce: Enable Payment Gateway Only for “Order Pay Checkout”

I invoice clients via WooCommerce, and then send them the “Invoice Email”, which takes them to the “Order Pay” page. Of course, I want to give them the option to pay via “Bank Transfer” (bacs), but I don’t want this to be visible on the default checkout page.

We’ve seen in the past how to disable payment gateways given certain conditions… but how do we “enable” one? Here’s a snippet for that – enjoy!

Tag: Single Product Page