Search Results for: Single Product

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: Hide Category & Tag @ Single Product Page

SKU, Category list and Tag list on the WooCommerce single product page are called “product meta”. We already saw how to hide just the SKU (while leaving Cats and Tags there), so in this “episode” we will study how to do the opposite i.e. keeping the SKU there while hiding Cats and/or Tags.

If you are a developer, you’d think there were a specific WooCommerce “filter” for this, but there is not. So, we have to first remove the whole “product meta” block and then add back the info we want (just the Cats, for example). If you’re not a dev – not to worry – just copy paste one of the snippets below in your functions.php and magic will happen. Enjoy!

Continue reading WooCommerce: Hide Category & Tag @ Single Product Page

WooCommerce: Single Product Page Redirect for Logged In Customers

If you sell one-off products like online courses, lifetime memberships or unique pieces that can only be purchased once by a given customer, maybe you’d better redirecting the logged in customer who has purchased that product to a custom URL, such as the shop page, the “my courses” page for online courses or another customer-specific section.

With this easy snippet you’ll learn how to see if a user is logged in and has purchased a given product ID and then how to do a safe PHP redirect. Enjoy!

Continue reading WooCommerce: Single Product Page Redirect for Logged In Customers

WooCommerce: Scroll To Product Tab @ Single Product Page

Depending on your theme, just creating an href link anchor to a product tab might or might not work i.e. it might not scroll to it as it’s currently closed.

Here comes a way to create href links that not only scroll to the tab, but also open it in case it’s closed (this will guarantee the anchor scroll to the tab). Also, a little jQuery “animate” will provide the smooth scroll and enhance UX. Hope you enjoy!

Continue reading WooCommerce: Scroll To Product Tab @ Single Product Page

WooCommerce: Move & Customize Upsells @ Single Product

Keeping WooCommerce upsells at the very bottom of the single product page it’s kinda boring. In my view, WooCommerce users want to know there are upsells even before they scroll down (you also might want that: upsell means more profit). Amazon does that too.

In this tutorial, we will see not only how to move them to the top, right below the Add to Cart, but also how to customize the upsells output to show just 2 columns and remove default WooCommerce “loop” elements such as the Add to Cart. Enjoy!

Continue reading WooCommerce: Move & Customize Upsells @ Single Product

WooCommerce: Always Show Variations’ Price @ Single Product

When a variable product has the same price for all variations, a unique price is shown to website users i.e. the one at the top of the page. However, this behaves differently when each variation has its own unique price – in this case the single variation price shows after a variation is selected.

Now, this can be good or this can be bad – it depends. So in this snippet we’ll see a quick fix to make this behavior consistent i.e. showing the variation price after selection every time, no matter the conditions.

Thankfully, it’s literally one line of PHP. Enjoy!

Continue reading WooCommerce: Always Show Variations’ Price @ Single Product

WooCommerce: Rename Product Description Tab Label @ Single Product Page

Product tabs show on the single product page, right below the image gallery. Tab labels are “Description”, “Additional Information”, “Reviews” by default – but what if you wish to rename them into something more relevant to your users?

Here’s a simple PHP snippet you can copy/paste into your child theme’s functions.php file to immediately change the “Description” tab name – enjoy 🙂 Continue reading WooCommerce: Rename Product Description Tab Label @ Single Product Page

WooCommerce: Remove “Description” Heading @ Single Product Tabs

When you are on the single product page, and you have a non-empty product long description, a “Description” tab appears below the product images. Unfortunately, not only the tab label is “Description”, but also the tab H2 heading. This sounds and looks horrible, so here’s a way to completely remove it.

Alternatively, you can use this other snippet in order to rename it: https://businessbloomer.com/woocommerce-rename-product-description-single-product-page/ Continue reading WooCommerce: Remove “Description” Heading @ Single Product Tabs

WooCommerce: Add Content Below the Single Product Page Images

One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…

If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.

In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only). Continue reading WooCommerce: Add Content Below the Single Product Page Images

WooCommerce: Hide Related Products @ Single Product Page

Adding content to the WooCommerce Single Product Page is super easy – but what if you wish to remove / hide a default element?

Well, in this case it gets even easier. All you need to know is the default hook used by WooCommerce – so that you can remove it with one line of PHP in your functions.php. You can find a list of default hooks here: (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/)

For example, how do we hide the Related Products? Well, here’s one line of code that will help you! Continue reading WooCommerce: Hide Related Products @ Single Product Page

WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

A client of mine asked me to code a checkbox on the single product page called “Is this a gift?”. They noticed that their customers who want to gift the product to a friend get confused with the “Shipping to a different address” form in the WooCommerce checkout.

So, what about renaming “Shipping to a different address” into “Who is this gift for?” if a “gift” is in the cart? Well, this snippet does just that and you can adapt it / customize it to your specific case. Continue reading WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

WooCommerce: How to Assign Free Shipping to a Single Product?

Believe it or not, the answer to this very frequent question is inside the WooCommerce settings… so don’t worry too much about coding if you’re not a developer!

From the WooCommerce shipping rates, you can select “Free Shipping” as a method but that would apply to ALL products – so how do you override the shipping settings and allow a single product to have free shipping? Continue reading WooCommerce: How to Assign Free Shipping to a Single Product?

WooCommerce: Display “FREE” Instead of $0.00 or Empty Price @ Single Product Page

In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it?

Well, here’s how you restore the old WooCommerce functionality – as usual it’s as simple as using a PHP filter provided by WooCommerce and overriding the default behavior.

Continue reading WooCommerce: Display “FREE” Instead of $0.00 or Empty Price @ Single Product Page

WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product

Sometimes, cool things don’t apply to certain businesses. Also, keeping the default WooCommerce behaviour might slow down your website, should you not need to use a specific functionality.

For example, I’m talking about the new “Featured Image Zoom”, introduced by WooCommerce a while ago. What if your customers don’t need this? How can you disable it?

Well, as usual, this can be done with a few PHP lines! Now go and disable all the stuff you don’t need 🙂

Continue reading WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product

WooCommerce: Order a “Free Sample” @ Single Product Page

Recently I was on a coaching call with a client and the “Free Sample” challenge came up. Client has 400+ products on the website and had no intention of adding a free variation to each product manually.

So, I promised to myself I was going to study a different approach. And today you get it completely free. Needless to say, a comment and a social media share are much appreciated 🙂 Continue reading WooCommerce: Order a “Free Sample” @ Single Product Page

WooCommerce: “Continue Shopping” Button @ Single Product Page

A freelance client hired me a while ago to display a “Continue Shopping” button on the Single Product Page, next to the Add to Cart. A simple way to send their users back to where they were coming from without clicking the “previous” button on the browser 🙂

Here’s how it’s done, featuring an awesome WordPress function called “wp_get_referer()”! Continue reading WooCommerce: “Continue Shopping” Button @ Single Product Page