Since version 1.1.0 of Woocommerce Upsell Popup PRO, you can copy, paste, and edit the popup template files for multiple upsell products without having to worry that new updates will wipe out your changes.
In native Woocommerce, you can override Woocommerce template files by copying them over to a folder named woocommerce in your child theme directory.
In Woocommerce Upsell Popup PRO plugin, you CANNOT override the popup templates, but you CAN create new templates from the already available templates (or make a completely new one if you know your way around codes).
Follow the guideline below to do so.
Step 1
The popup template files for multiple upsell products are located in /wp-content/plugins/woocommerce-upsell-popup-pro/templates/
When you open the templates folder, you will see these 2 files:
1. thp-popup-template-default-mult.php
2. thp-popup-template-radio-mult.php
The names of the files, hopefully, are self-explanatory. The first file is the file for the default popup template (“Default Template”). The second file is for the template called “Template 1 – Radio Button”.
Step 2
Now, go to your child theme’s directory and create a new folder called wuppro. Inside this folder, create another folder called multiple.
So now you have this: /wp-content/themes/my-child-theme/wuppro/multiple/
Please note that my-child-theme should be replaced with the actual folder name of your child theme.
Step 3
Now, copy the template file in Step 1 that you want to edit and paste it inside the folder that you created in Step 2.
Let’s say you want to edit the default popup template, so now you have this: /wp-content/themes/my-child-theme/wuppro/multiple/thp-popup-template-default-mult.php
We’re not done yet! Now the most important part! The copied template file has to be renamed! The name of the copied template file must adhere to the following rule:
1. It has to start with template-
2. It should obviously end with .php
For example, these are correct names:
template-awesome.php
template-my-custom-template.php
template-mycustomtemplate.php
template-default_template_1.php
template-1234.php
So let’s say you decided to name the file as template-awesome.php, so now you have this: /wp-content/themes/my-child-theme/wuppro/multiple/template-awesome.php
Step 4
Once you have copied the template file to your child theme folder like instructed in Step 3, it is time to add some important information to the template!
Now open your new template file that you created in Step 3.
Here is the next important thing you have to pay attention to. You have to add the following comment header to the top of your template:
Template Name – replace this with whatever name you want to call your new template.
Uses Slider – if your template requires Flickity slider/carousel, put “Yes”, else just put “No”.
You might be asking, “What is Flickity carousel and how do I know if my template needs it?”
Our default popup template uses Flickity carousel to make it easier for users to scroll through multiple upsell products shown on a popup.
This is what Flickity carousel looks like on the default popup template:
See the right and left arrows in the image above? On a real popup, when you click on the arrows, more products will show, like a slider. This is what Flickity carousel does. If you want this feature on your new template, you have to specify “Uses Slider: Yes” in your comment header. If you don’t need this carousel on your new template, just put “Uses Slider: No”.
Other than the default template, there is another popup template called “Template 1 – Radio Button” (refer Step 1). This template does NOT use Flickity carousel.
Step 5
After completing all the steps above, now it is time to actually edit your template! There’s no specific thing to do here, just add, delete, or edit the codes as you like. You do have to have at least a little bit of skills to read codes in order to edit the popup templates.
If you followed all the steps above correctly, your new template can now be selected from the dropdown under Popup Template > Template for multiple upsell products, as seen in the image below:
Need help with creating popup templates? Contact support!