Identify which products bought together belong to the main product in Supermarket theme
Solution:
Create a product option named Parent SKU:
Edit the option set of your also bought together products and add Parent SKU option to option set. Set Required = No:
Make sure your also bought together products has Parent SKU field:
Now, view a product which has the also bought together products from store front. Verify it has Parent SKU option:
Create a new script in Storefront > Script Manager, insert the code below:
<script>
(function($) {
$('body').on('change', '[data-also-bought-checkbox]', function() {
var $sku = $('.productView [data-also-bought-parent-scope] [data-product-sku]');
$('[data-product-attribute="input-text"]').each(function(i, el) {
var $el = $(el);
if ($el.find('label').text().trim().toLowerCase() === 'parent sku:') {
$el.find('input').val($sku.text().trim());
$el.hide();
}
});
});
})(jQuerySupermarket || jQuery);
</script>
Now view your product page again, you will see that Parent SKU field is hidden:
Add the main product and the also bought product to cart, you will see Parent SKU appear as same as the main product SKU:
This option field also appears on invoices, orders history and so on.
Theme design & customization blog
-
The Ultimate Guide to Showcasing Products by Category for All BigCommerce Themes
In today's digital marketplace, the way you display your products can make a significant differen …23rd May 2023 -
Auto update quantity of products bought together according to the main product qty in Supermarket theme
Insert the code below to Storefront > Script Manager:<script>(function($) { $('body').on …9th Sep 2019 -
Identify which products bought together belong to the main product in Supermarket theme
Solution:Create a product option named Parent SKU:Edit the option set of your also bought together p …9th Sep 2019