CODEWITHSUNDEEP
wordpresswordpress-theming
Guerrilla
Guerrilla

Reputation: 14846

How to create a template if site is using Divi?

I am doing some work on a site and everything is made in Divi.

I just want to build out a few custom woocommerce templates for product page etc.. using code but when I add the templates to the theme folder it doesn't override the product page.

When I look in debug query it shows the et page builder template is being used instead of regular product template.

Their docs are all geared up for non-coders and only code related stuff is on making modules.

How do I just make a normal template override from a child theme?

Upvotes: 4

Views: 1843

Answers (1)

thingEvery
thingEvery

Reputation: 3434

You just have to make sure your path to the template files is correct. For instance, if you're trying to overwrite the single-product template, which is located at: 

wp-content/plugins/woocommerce/templates/single-product.php

just copy it to: 

wp-content/themes/{your-child-theme}/woocommerce/single-product.php

and make your changes there.

For any template files, just match the path minus the templates folder.

If you have any caching plugins installed, you may need to clear your cache before the changes show up.

To test it, I copied single-product.php and product-image.php and made the following changes.

single-product.php

product-image.php

And you can see the result here: enter image description here

If that doesn't work for you, make sure your child theme is set up correctly.

Edit: Divi's Theme Builder, once activated, causes the site to no longer use page templates. So there is no way (short of rewriting the Theme Builder) to override it with your own template files.

However, you can customize the Divi modules that are used by the Theme Builder, although editing them is a bit more complicated.

The modules are found in:

wp-content/themes/Divi/includes/builder/module/

For example, I'll override the WooCommerce Title module.

wp-content/themes/Divi/includes/builder/module/woocommerce/Title.php

First, copy that file into your child theme and place it in a new folder:

wp-content/themes/Divi-child/custom-modules/Title.php

Next, add the following code your child theme's functions.php to replace the existing module:

function divi_child_theme_setup() {
    if ( class_exists('ET_Builder_Module')) {
        get_template_part( 'custom-modules/custom-title' );
        $TE_ct = new Custom_ET_Builder_Module_Woocommerce_Title();
        remove_shortcode( 'et_pb_wc_title' );
        add_shortcode( 'et_pb_wc_title', array($TE_ct, '_shortcode_callback') );
    }
}
add_action('wp', 'divi_child_theme_setup', 9999);

Call your variable ($TE_ct) and the module (Custom_ET_Builder_Module_Woocommerce_Title) whatever you want.

Finally, edit the module in your child theme. Make sure the class name matches what you used in functions.php.

...
class Custom_ET_Builder_Module_Woocommerce_Title extends ET_Builder_Module {
    /**
     * Initialize.
     */
    public function init() {
        echo "<h1>CUSTOMIZED!!</h1>";
        $this->name       = esc_html__( 'Woo Title', 'et_builder' );
        $this->plural     = esc_html__( 'Woo Titles', 'et_builder' );
        $this->slug       = 'et_pb_wc_title';       
        $this->vb_support = 'on';
...

Here, I've added a simple echo to show that the module is being overridden.

Result:

enter image description here

Upvotes: 1

Related Questions