Single Product Page Archives - Page 2 of 6

WooCommerce: Show Shipping Rates @ Single Product Page

In today’s “Watch me customize my WooCommerce marketplace website” episode (see previous customization re: external products) we’ll go printing shipping zones and rates on the single product page, so that users know how much they’ll end up spending once they reach the Cart/Checkout and there are no “hidden” fees. Not bad for some transparency = better sales conversion rate!

You can see the result on my own website, at this link for example: https://www.apieceofsicily.com/en/shop/sicilian-crafts/ciabattino/ – as you can see right below the “Add to Cart” button there is a shipping table with the data taken from the shipping zones.

I must say I use YITH WooCommerce Multi Vendor / Marketplace so that data is actually taken from each vendor’s shipping setup – so in this tutorial we will first see how to get the default “WooCommerce Shipping Zones Data” and in a second snippet we will instead see how to get the info for each vendor instead.

Either way, enjoy!

WooCommerce: Open External Product Link In New Tab

Today I start a personal WooCommerce customization marathon as I try to relaunch my personal project A Piece of Sicily (a Sicilian products marketplace, WPML friendly, with products uploaded by vendors and external (affiliate) products).

Each week I will share a snippet I’ve personally coded, so that you can follow me along the going-live path and actually see the results on the live site.

This time, we’ll talk about External Products, and specifically at how to Open the external add to cart URL in a new tab, so that users stay on your WooCommerce website even after visiting the affiliate link. Enjoy!

WooCommerce: “Explode” Product Tabs

If you like the Amazon single product page layout, you probably dislike the default WooCommerce single product page tabs layout. This is the section where, by default, “Description”, “Reviews”, “Additional Information” and other custom content show… as tabs below the image & short description.

Thankfully, there is a super easy way to remove such tabs and display each tab on top of each other, without hiding any content. If it’s good for your users, then I recommend you make use of this super simple snippet.

In this tutorial, you will learn about “pluggable functions”. Basically, where provided, you can simply redeclare a custom plugin (WooCommerce) function without having to use hooks or overrides. WordPress will just “listen” to your new version and not the original one any longer.

So, enjoy!

WooCommerce: Edit Product Layout If Logged In

Logged in customers often require different UX, communication and website layout. You can hide add to cart buttons for logged out users, yes, but you can also completely remodel the single product page layout. For example, you can remove the featured image, the add to cart button (because maybe you only want them to purchase one product), the sale badge, the price, product tabs, and so on – while also adding logged-in only information such as custom buttons, banners and media.

In this tutorial we’ll see how to target logged in customers who purchased the current product, how to remove some default layout elements and how to add some custom HTML and CSS to the single product page. Enjoy!

WooCommerce: Calculate Subtotal On Quantity Increment @ Single Product

From a UX point of view, ecommerce customers may enjoy a little improvement on the WooCommerce single product page. As soon as they increase the add to cart quantity, it’d be nice if product price could be recalculated or maybe if a “TOTAL” line could appear so that users always know how much they are about to add to cart.

Honestly, this is hard to explain it this way, so the best is if you look at the screenshot. Enjoy!

WooCommerce: Set / Override Product Price Programmatically

There are times when the edit product page settings are not enough. Yes, you usually set regular and sale price via the price fields under “Product Data”; however sometimes you may have to override those prices via code, because you’re running a special promotion, you don’t want to manually change thousands of prices or maybe you need to show different values to logged in customers only.

Either way, “setting” the product price programmatically consists of two distinct operations. First, you need to change the “display” of the product price on single and loop pages; second, you actually need to set a “cart item” price, because the previous code does not really alter price values.

As usual, easier coded than said, so let’s see how it’s done. Enjoy!

WooCommerce: Show Dispatch / Est. Shipping Date @ Single Product

A good way to inform online customers and avoid issues is showing the estimated delivery / dispatch time on the single product page, just below the “Add to Cart” button. Yes, you could do that manually by adding shipping info to each product short description, but the goal of Business Bloomer is to learn how to code that instead, so you won’t need to write things manually.

Also, this is great because if you change something in your dispatch rules, you just need to change the short PHP snippet and not all your product descriptions. It’s much more flexible this way.

Finally, in this post we’ll learn how to work with cut-off times (hour of the day) and current day of the week (pure PHP), so that we can show a “dynamic” notice based on current date. So, let’s see how it’s done!

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!

WooCommerce: Set Min Purchase Amount for Specific Product

We already studied how to set min/max WooCommerce add to cart quantity programmatically. That was an easy one. This time, I want to expand on the topic, and define a “minimum order amount on a per-product basis”.

Which, translated in plain English, would be something along the lines of “set the minimum purchase amount for product XYZ to $50”. And once we do that, I expect that the add to cart quantity does non start from 1 – instead it defaults to “$50 divided by product price”. If product price is $10, I would want to set the minimum add to cart quantity to “5” on the single product and cart pages.

Makes sense? Great – here’s how it’s done.

WooCommerce: Edit External Product Image URL

We’ve already seen how to open the External Product “Buy Product” button in a new browser tab – and now it’s time to complete the full picture for External/Affiliate WooCommerce Products: how do we also link the “featured” image to the same external URL?

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!

WooCommerce: Truncate Short Description With “Read More” Toggle

You can apply this simple jQuery snippet to any piece of WooCommerce content.

In this example we’ll see how to truncate the WooCommerce single product short description and place a “read more” link to reveal the hidden content… however you can also apply this to the long description, a custom product tab, the product gallery, and whatever can be truncated.

Enjoy!

WooCommerce: How to Add Extra Product Options (Add-Ons)

This is a guest post by Maarten Belmans of Studio Wombat – if you like the article, make sure to thank him in the comments!

If you use WooCommerce for your online business, you may have needed the ability to add extra options.

That functionality allows buyers to personalize their products exactly the way they want – whether they want to add their favorite pizza topping or buy a laptop with extra RAM.

When you provide those options, you optimize the customer experience on your website. But in order to provide those customization options, you’ll need a product add-on plugin.

That type of plugin makes it easy for you to create additional form fields, which in turn allows your visitors to customize the products they want to purchase.

WooCommerce: Count Product Recent Sales

We already talked about displaying the total number of sales for a given product ID, however what if you just want to calculate sales in the last week?

This is a much better option when you have a busy WooCommerce shop and want to increase your sales conversion rate.

So, here’s the snippet – paste to your functions.php and enjoy!

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!

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!

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!

Join 75,000+ Monthly Readers & 16,000+ Subscribers.

Become a Business Bloomer Supporter.