The code snippet below demonstrates how to integrate Divi with WooCommerce in WordPress. This integration allows you to use Divi’s powerful page builder features to design and customize your WooCommerce product pages.
function wpsnippets_divi_woocommerce_integration() {
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_divi_woocommerce_styles' );
add_action( 'woocommerce_before_main_content', 'et_divi_woocommerce_wrapper_start', 10 );
add_action( 'woocommerce_after_main_content', 'et_divi_woocommerce_wrapper_end', 10 );
add_action( 'woocommerce_single_product_summary', 'et_divi_woocommerce_product_image', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 6 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 7 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 8 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 9 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
}
add_action( 'wp', 'wpsnippets_divi_woocommerce_integration' );
function wpsnippets_enqueue_divi_woocommerce_styles() {
wp_enqueue_style( 'divi-woocommerce', get_stylesheet_directory_uri() . '/divi-woocommerce.css' );
}
This code snippet adds various actions to integrate Divi with WooCommerce. It enqueues a custom CSS file called divi-woocommerce.css to style the WooCommerce elements according to Divi’s design. The wpsnippets_divi_woocommerce_integration function is hooked to the wp action, which ensures that the integration code runs at the appropriate time. The wpsnippets_enqueue_divi_woocommerce_styles function is hooked to the wp_enqueue_scripts action to enqueue the custom CSS file.
To use this code snippet, you need to create a CSS file named divi-woocommerce.css in your theme’s directory and add your custom styles for WooCommerce elements.
Examples
Example 1: Adding a custom product tab to Divi WooCommerce integration
This use case demonstrates how to add a custom product tab to the WooCommerce product page in the Divi theme. The code example below adds a new tab named “Custom Tab” and displays custom content within it.
function wpsnippets_add_custom_product_tab() {
echo '<li class="custom_tab"><a href="#custom_tab_content">' . esc_html__( 'Custom Tab', 'text-domain' ) . '</a></li>';
}
function wpsnippets_custom_product_tab_content() {
echo '<div id="custom_tab_content" class="panel entry-content">';
echo '<p>' . esc_html__( 'Custom tab content goes here.', 'text-domain' ) . '</p>';
echo '</div>';
}
add_filter( 'woocommerce_product_tabs', 'wpsnippets_add_custom_product_tab' );
add_action( 'woocommerce_product_tab_panels', 'wpsnippets_custom_product_tab_content' );
The wpsnippets_add_custom_product_tab function adds a new tab to the product page by appending a new list item to the existing tabs list. The wpsnippets_custom_product_tab_content function displays the content of the custom tab. The woocommerce_product_tabs filter is used to add the new tab, and the woocommerce_product_tab_panels action is used to display the tab content.
Example 2: Modifying the WooCommerce product page layout in Divi
This use case demonstrates how to modify the layout of the WooCommerce product page in the Divi theme. The code example below removes the default product image and adds a custom layout using Divi’s built-in modules.
function wpsnippets_modify_product_page_layout() {
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_before_single_product_summary', 'wpsnippets_custom_product_layout', 20 );
}
function wpsnippets_custom_product_layout() {
// Custom layout using Divi modules
echo do_shortcode( '[et_pb_section][et_pb_row][et_pb_column type="2_3"][et_pb_text]Custom product layout goes here.[/et_pb_text][/et_pb_column][et_pb_column type="1_3"][et_pb_sidebar area="sidebar-1"][/et_pb_sidebar][/et_pb_column][/et_pb_row][/et_pb_section]' );
}
add_action( 'wp', 'wpsnippets_modify_product_page_layout' );
The wpsnippets_modify_product_page_layout function removes the default product image using the woocommerce_before_single_product_summary action and adds a custom layout using the wpsnippets_custom_product_layout function. The custom layout is created using Divi’s built-in modules and is displayed using the do_shortcode function.
Example 3: Customizing the WooCommerce cart page in Divi
This use case demonstrates how to customize the layout and content of the WooCommerce cart page in the Divi theme. The code example below adds a custom message above the cart table and modifies the table columns.
function wpsnippets_customize_cart_page() {
add_action( 'woocommerce_before_cart_table', 'wpsnippets_custom_cart_message' );
add_filter( 'woocommerce_cart_item_name', 'wpsnippets_modify_cart_item_name', 10, 3 );
}
function wpsnippets_custom_cart_message() {
echo '<p>' . esc_html__( 'Custom message above the cart table.', 'text-domain' ) . '</p>';
}
function wpsnippets_modify_cart_item_name( $product_name, $cart_item, $cart_item_key ) {
// Modify the cart item name
return $product_name . ' (Custom)';
}
add_action( 'wp', 'wpsnippets_customize_cart_page' );
The wpsnippets_customize_cart_page function adds a custom message above the cart table using the woocommerce_before_cart_table action. The wpsnippets_modify_cart_item_name function modifies the cart item name by appending “(Custom)” to it using the woocommerce_cart_item_name filter.