Single Product Page Archives - Page 4 of 9

WooCommerce: Twitter Share & Facebook Like @ Single Product Page (Without a Plugin)

Once again this week we take a look at some of the WooCommerce customization I personally added to A Piece of Sicily, a Sicilian crafts and food marketplace I run together with my very-soon-to-be wife.

This week we take a look at the single product page. There are hundreds of social media share plugins, but I decided to go lightweight and simply embed the Twitter Share and Facebook Like buttons, so that I don’t need to worry about plugin updates, conflicts, etc. You can see the final result on one of my product pages, such as https://www.apieceofsicily.com/en/shop/sicilian-food/confetture-iddu-e-idda-e-arancella/

So, here’s how it’s done. Enjoy!

WooCommerce: Show Shipping Rates @ Single Product Page

Here’s a way to print 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!

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

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…

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.