Especially when you migrate from a different ecommerce platform to WooCommerce, you may end up placing or importing content in the wrong place.
A lot of confusion, for example, arises when a new WooCommerce store owner needs to understand the difference between the “Long” and the “Short” description. Well, the “Long description” is the one that displays inside the “Description” tab, below the product summary (that section that features the image on the left + add to cart on the right), usually in full width. The “Short description“, on the other hand, is the one that shows on the right hand side of the product image, and is usually… shorter.
Now, what if you don’t use the “Short description” in your WooCommerce store, and you wish to display the “Long description” on the right hand side of the featured image instead? Well, here’s a simple snippet for you. Enjoy!
Continue reading WooCommerce: Display Long Description Instead Of Short One @ Single Product Page
The WooCommerce Single Product page, on top of letting you add to cart the current item, also displays a list of related products and up-sells (when defined).
But what if you ALSO want to show a grid of “related product categories”, so that the customer can easily navigate to a category page instead of a single (related) product?
In this experiment, we will first calculate the current product’s categories, and then use a WooCommerce shortcode to output them as a grid, right below the related products section. Enjoy!
Continue reading WooCommerce: Display “Related Product Categories” @ Single Product Page
As you know, the WooCommerce Single Product Page displays a set amount of related products (usually 4). But despite the fact that you can customize the number of related products via code, there is no setting that allows you to have a “LOAD MORE” button instead.
My goal is therefore to show as many Related Products as the user wants without reloading the page, so that they can find out more potential matches and increase the chances to place an order.
I must say this took me the whole morning and it’s not yet finished. There are two small bugs: (1) the “Load More” button does not hide once there are no more related products and (2) once the current product’s related products are finished (so, after clicking on the load more button 1 or more times), the Ajax keeps showing the last related product as opposed to show none. Feel free to contribute if you wish to help!
Having said that, let’s see how to implement an Ajax “load more” feature. You can also reuse this on different projects (e.g. “load more blog posts”), because once you get to understand how Ajax works then you can do lots of cool stuff without refreshing the page.
Continue reading WooCommerce: “Load More Related Products” Ajax Button @ Single Product Page
WooCommerce allows you to “schedule” the product sale price – you can define a start date and an end date, so that you can run your promotion automatically.
However, for some reason, this information is only visible to the admin. It would be awesome to show the “sale price end date” to customers as well, don’t you think? So, let’s do it!
Continue reading WooCommerce: Display Sale Price End Date @ Shop & Single Product Page
I find it unusual that after years of sharing tutorials on Business Bloomer there is no snippet for creating a custom product tab on the single product page!
I mean, we’ve seen an example on Related Products in a Custom Tab snippet a while ago, but here I want to concentrate on the actual functionality of adding a custom tab, giving a name and a heading to it, showing it conditionally (e.g. only for a specific product category), and making sure the “scroll to tab” works when the URL contains its anchor tag.
Continue reading WooCommerce: Add New Tab @ Single Product Page
On a default theme, such as Storefront, the single product page template is laid out so that the SALE badge comes first, on its own line, then comes the product title, the product price on its own line, the short description, the product’s stock availability and the add to cart button.
As you can see from the screenshot below, there is lots of white space on the right hand side, so for my new business line (WooCommerce Mini-Plugins, you somewhat guessed it, right?) I wanted to improve the single product page layout and move the SALE badge right beside the price, so that I could achieve two objectives: save some space, and also focus the customer attention on the product price as opposed on to the badge.
So, let’s see how I did it. Enjoy!
Continue reading WooCommerce: Move Sale Badge Beside Price @ Single Product Page
The Additional Information tab on the WooCommerce Single Product Page displays information about product dimensions, weight, and possible attribute terms.
There are hooks, thankfully, that can help us display additional content in there, either above or below the attributes table. Enjoy!
Continue reading WooCommerce: Add Content To Additional Information Tab @ Single Product Page
We’ve already seen how to edit the “Related Products” title and how to add a subheading below it; this time, we’ll do the exact same but for the upsells section, which shows on the Single Product Page once an admin manually defines some “linked products” in the product settings / upsells.
Once again, we’ll take a look at a snippet to edit the title (“You may also like…“), and another one to add some HTML content below it. Enjoy!
Continue reading WooCommerce: Upsells Custom Heading & Subheading @ Single Product Page
There are times when the “long description” and the “short description” are not enough on the WooCommerce Single Product page. What if you need to add another HTML content section – say – at the very bottom of the page (and maybe, because of the longer page, add another add to cart button there as well)?
In this simple snippet, we will add another “WYSIWYG” text editor in the Edit Product page, and display the output at the bottom of the single product page. Enjoy!
Continue reading WooCommerce: Add a Third Description @ Single Product Page
In case you have very long single product pages, it may be helpful to show the Add to Cart form at the bottom of the page or even inside the description tab.
Thankfully this is pretty easy and only requires one line of code. The only thing that you may want to change is the hook name, which defines the position of the button, and the priority, which defines the relative position of the element in case there are other ones “hooked” onto the same hook.
In this example, we will place the button at the very bottom of the page, below tabs, upsells and related products. Enjoy!
Continue reading WooCommerce: Duplicate Add to Cart Button @ Single Product Page
WooCommerce variable products display the list of attributes and their terms in the “Additional Information” tab on the single product page. For example, it will display “Color: red, yellow” and “Size: large, small” if your variable product uses those attribute terms to generate variations.
Yes, you could completely remove the “Additional Information” tab all together, but sometimes you may need to just hide a specific attribute in this table, for whatever reason. Especially when you want to avoid your customers getting confused and abandoning your website.
So, here’s the fix. Enjoy!
Continue reading WooCommerce: Hide Specific “Additional Information” Tab Attribute @ Single Product
If you’re familiar with WooCommerce variable products, variations are generated from product attribute terms (color: yellow & size: large for example). All possible attribute terms are displayed in the “Additional Information” tab of the single product page, so that the customer has an idea of all the possible product options.
However, as you can see from the screenshot below, this information is static i.e. does not change when you select a variation. It would be much more helpful if the attribute information changed from e.g. “Color: red – yellow – green” to the currently selected variation attribute term e.g. “Color: red“.
In today’s quick snippet, we’ll show just that: a combination of PHP and jQuery to make sure that “Additional Information” tab is always updated based on the selected variation. Enjoy!
Continue reading WooCommerce: Dynamically Update Variable Product Attributes @ Single Product
If a WooCommerce product comes with weight and/or height / length / width values, these will be displayed by default in the Single Product page, under the “Additional Information” tab.
Should you need to hide them completely from the frontend while keeping the list of attributes below them, thankfully there’s a PHP one-liner you can use. Enjoy!
Continue reading WooCommerce: Hide Weight & Dimensions From Additional Information Tab @ Single Product
If you use WooCommerce product tags, it’s possible that a product may belong to 10 or more of them. When that happens, the single product page displays a long list of tag links, which may take too much space (see the below screenshot to visualize this).
Today’s snippet is indeed a way to truncate that list to – say – 3 tags only, and add a “+” to show the rest upon click. In this way if the customer is really interested in that they can expand the view, otherwise tags will take up a single line only. Enjoy!
Continue reading WooCommerce: Truncate Tag List @ Single Product Page
We already saw how to get the “Variation ID” from the single product page once product attributes dropdown are selected. In that tutorial, we ran a jQuery “change” event once “input.variation_id” got updated.
However, that only gives us access to the variation ID. What if I need to read the variation price, stock quantity, SKU, weight, and so on? Well, in such case, we need different code. Enjoy!
Continue reading WooCommerce: Display Selected Variation Info (price, weight, etc.) @ Single Product Page
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!
Continue reading WooCommerce: Twitter Share & Facebook Like @ Single Product Page (Without a Plugin)
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!
Continue reading WooCommerce: Show Shipping Rates @ Single Product Page
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!
Continue reading WooCommerce: Calculate Subtotal On Quantity Increment @ 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!
Continue reading WooCommerce: Show Dispatch / Est. Shipping Date @ Single Product
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