How to create a template if site is using Divi? - wordpress

Question

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?

Answer 1

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.
And you can see the result 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: