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! Continue reading WooCommerce: Truncate Short Description With “Read More” Toggle
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. Continue reading How to Add Extra Product Options (Add-Ons) to WooCommerce
WooCommerce picks related products on the Single Product Page based on product categories and/or product tags. Related products are very important to the shopping experience, and sometimes this is not enough – what if you want to automatically show certain products based on different criteria?
So, here’s a quick snippet to e.g. get related products with the same product title of the current one. A very strange example, but you can use this as reference in case you want to get products based on different criteria. The get_posts() function, in fact, can be customized to get products with a given stock, certain price range, same custom field value, search term, and so on. Continue reading WooCommerce: Custom Related Products
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! Continue reading WooCommerce: Count Product Recent Sales
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
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
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
Here’s how you can display a “checkbox” in the product edit page in order to hide the Related Products section in case this is checked. This is something you can also reuse to hide other sections in the same way – for example you might need to hide product tabs or featured image in certain cases.
I’ve coded this in 15 minutes for a client so why not sharing it with you too? Here’s the full snippet, enjoy! Continue reading WooCommerce: Checkbox to Disable Related Products Conditionally
WooCommerce product add-ons are custom input fields that show on the single product page. They’re called “add-ons” as you can add a product personalization or an upsell (at a cost of course).
For example, you can display a text input to print something on the product. Or radio buttons to select different kinds of product upgrades. Or a checkbox to upsell gift wrapping.
Either way, and of course, there are plugins for that. But first, I want to give you a tutorial to code this by yourself (case study: global custom input text field and no surcharge), so that you can learn something new. Enjoy! Continue reading WooCommerce: Product Add-Ons (Without a Plugin!)
I had the pleasure to speak at WordCamp Prague 2019. I spoke about “10 PHP Snippets to Increase WooCommerce Sales” and managed to show some simple coding to the audience. Trust me – increasing your WooCommerce sales can also be done with a free, short, easy PHP snippet.
So, given that I want to share all the snippets I talked about, this is a quick recap. Copy them, test them (a must!) and then use them. And let me know if your conversion rate and/or AOV (average order value) increased!
At the bottom of the page you also find my talk slides. Enjoy:) Continue reading WooCommerce: 10 Easy Snippets to Increase Your Sales
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
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
Here’s a quick snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page.
This snippet comes with a jQuery script as well, as we need to detect whether the plus or minus are clicked and consequently update the quantity input. jQuery might look difficult to many, but the beauty of this is that you don’t need to have a degree in jQuery – just copy/paste and see the magic happen.
Note: you will probably also require some additional CSS, as your theme might give a “float” to the quantity DIV while by default HTML buttons take inline-block. I’ve added some CSS valid for the Storefront theme below. Continue reading WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input
The WooCommerce product short description is that piece of content that appears on the right hand side of the featured image above the add to cart button. This is, of course, unless you forgot to enter the short description under Product > Edit Product!
But in case you forgot to enter it, or alternatively want to display a global short description, here’s a quick PHP snippet for you. Enjoy! Continue reading WooCommerce: Show Custom Short Description When Empty
We’ve seen a lot of PHP so far on Business Bloomer – WooCommerce after all is a bunch of PHP files! However, sometimes PHP is just not enough, mostly when you need to work with variable products and the “currently selected variation”.
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
Product customization has been revolutionizing ecommerce in the last 5 years. And WooCommerce store owners, if possible, should look into offering additional product options, add-ons, personalizations, custom text and whatever can make a mass product unique to each single customer.
You can now pick your shoe colors, engrave a message on jewelry, upload your own graphics on t-shirts, pick your own ingredients, select custom materials and so on. Correct, some very smart marketer found out a way to sell the same exact product to a bunch of very different, demanding people and make them all 100% happy – while also increasing average order value (AOV), margins, profits, return business and decreasing returns, bad feedback and churn rate.
Most of us rely on WooCommerce product variations to sell the same product in different “sizes” or “colors”… but this has got nothing to do with product “add-ons”. With a product add-ons plugin, you can sell additional options and personalizations on top of the existing product attributes.
Good news is there are free and premium plugins that can help you implement product options, customization and add-ons… and eventually increase your profit. Continue reading WooCommerce: How to Sell Product Customizations & Add-Ons
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
There are many plugins out there to show custom badges, notices, messages… but as usual a few lines of PHP can help you achieve the same result!
Today we take a look at how to add a checkbox to the product edit page, so that you can display a conditional badge based on whether the checkbox is checked or not.
Have fun 🙂 Continue reading WooCommerce: Display Custom Product Badge (Conditionally)
Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.
Easy, yes. Unfortunately, the above only applies to products without variations (or the parent product only if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation? Continue reading WooCommerce: Add Custom Field to Each Product Variation