Divi Shop Builder’s Woo Shop+ module allows you to customize the content and appearance of your shop page, including letting you choose which content elements you would like to show, and (in the case of the grid layout) which order they should appear in. But what if you want to add some custom content, such as a badge that isn’t already included in Woo Shop+? This tutorial will walk you through the code that is needed to add a custom badge to Woo Shop+ using some filter hooks that are included in Divi Shop Builder, and the same concepts can be applied to add other types of content as well.
This tutorial assumes that you already have a preferred method of adding custom PHP code to your website, such as via a child theme’s functions.php file, a custom plugin, or a snippets plugin.
In order to complete this tutorial, your site needs to be running on PHP 7.0 or higher, and have Divi Shop Builder version 2.0.17 or higher activated.
Step 1: Custom Content Function
First we need to create a function that outputs the custom content (a badge in this case). Typically this will be conditional on the product being displayed, which we can check via the global $product variable. We can choose any valid name we want for the function, as long as it’s unique on the site. For example, here is my_custom_badge() which checks whether the product costs $10 or less and outputs a “Low Price!” badge if so:
function my_custom_badge() {
global $product;
if ($product->get_price() <= 10) {
echo('<strong>Low Price!</strong>');
}
}
Step 2: Register the Custom Content Element
Next, we need to tell Divi Shop Builder about our custom content element and the function that renders it. We can do this using the dswcp_woo_shop_item_actions filter hook, and we need to provide a unique ID for the element (consisting only of letters, numbers, dashes, and/or underscores) as well as the name function we created in Step 2, as two-dimensional array. Using the ID my-custom-badge, this looks like this:
add_filter('dswcp_woo_shop_item_actions', function($elementTypes) {
$elementTypes['my-custom-badge'] = [ [ 'my_custom_badge' ] ];
return $elementTypes;
});
Step 3: Make the Custom Element Available in Grid Layouts
In Woo Shop+ modules with a grid layout (where the module layout is either “Grid” or “Grid / List View Switch”), content elements can be added to, removed from, and reordered in the grid. Each content element has a type that defines what it displays. To add our custom badge to dropdown for selecting the content element type, we need to add it in the dswcp_woo_shop_item_types filter hook, using the ID we registered in Step 2, along with an HTML-safe name to display in the dropdown. This might look like this:
add_filter('dswcp_woo_shop_item_types', function($elementTypes) {
$elementTypes['my-custom-badge'] = 'My Custom Badge';
return $elementTypes;
});
This step can be omitted if the content element will not be displayed in grid-based shop layouts.
Step 4: Make the Custom Element Available in List Layouts
In Woo Shop+ modules with a list layout (where the module layout is either “List” or “Grid / List View Switch”), content elements are shown in a predefined order. We can modify this order to insert our custom badge using the dswcp_woo_shop_child_order filter hook. This might looks something like this (using the my-custom-badge ID we defined in step 2):
add_filter(
'dswcp_woo_shop_child_order',
function($elementOrder, $wooShopOptions) {
if (($wooShopOptions['layout'] ?? 'grid') == 'list') {
array_splice($elementOrder, 1, 0, 'my-custom-badge');
}
return $elementOrder;
},
99,
2
);
The second argument to array_splice() above defines where in the product row the new element is inserted; it must be at least 1, signifying the start of the row. Increasing this value should move the custom element further along in the row.
As above, this step can be omitted if the content element will not be displayed in list-based shop layouts.
Putting it Together
Here is what this snippet might look like with the above components put together, along with some comments to indicate what the different parts of the code do:
function my_custom_badge() {
global $product;
if ($product->get_price() <= 10) {
echo('<strong>Low Price!</strong>');
}
}
/** Register the callback for a custom Woo Shop+ product child
element **/
add_filter('dswcp_woo_shop_item_actions', function($elementTypes) {
/*
my-custom-badge: the ID of the custom element; must be unique
and should contain only letters,
numbers, dashes, and/or underscores.
my_custom_badge: the function that outputs the custom element
HTML. It does not receive any arguments.
The global variable $product represents the
product being rendered.
*/
$elementTypes['my-custom-badge'] = [ [ 'my_custom_badge' ] ];
return $elementTypes;
});
/** Allow selection of the custom element in grid layouts
(optional) **/
add_filter('dswcp_woo_shop_item_types', function($elementTypes) {
/*
Sets the title of your custom element and makes it available for
selection in the grid layout. The title should be HTML safe.
*/
$elementTypes['my-custom-badge'] = 'My Custom Badge';
return $elementTypes;
});
/** Insert the custom element into list layouts (optional) **/
add_filter(
'dswcp_woo_shop_child_order',
function($elementOrder, $wooShopOptions) {
/*
Insert the custom element at the start of the product row
(immediately following the row-start element)
*/
if (($wooShopOptions['layout'] ?? 'grid') == 'list') {
array_splice($elementOrder, 1, 0, 'my-custom-badge');
}
return $elementOrder;
},
99,
2
);
Conclusion
This tutorial demonstrated how to take advantage of the extensibility built into Divi Shop Builder’s Woo Shop+ module to add a custom badge to products displayed in the shop. This pattern can be further extended to add pretty much any type of content you want!
Recent Comments