Popup shows loading spinner continuously or failed to work? If your popup doesn’t load correctly and the loading spinner continues to spin indefinitely like what is shown in the image below, follow this guideline to troubleshoot your problem.
1. Check your Woocommerce settings.
The first thing to do if your popup just shows the loading spinner is to check your Woocommerce settings. For the plugin to work as intended, your Woocommerce setting has to be set as follows:
After logging in to your WordPress dashboard, go to Woocommerce > Settings > Products > General > Shop pages. And then for ‘Add to cart behaviour’, uncheck ‘Redirect to the cart page after successful addition’.
Remember, this is the most important step to make the plugin work!
AJAX can be enabled or disabled, popups will fire regardless.
2. Check what pages you are trying to call the popup from.
If you already set the Woocommerce settings as instructed in the step above and are still experiencing the problem, the second thing to do is to check what pages you are trying to call the popup from.
On the WordPress.org page of the free version of the plugin, it clearly stated that “Popup will fire when user adds a product to cart from shop page, product category page, or single product page”. Which means, the popup will NOT work on custom pages other than shop page, product category page, or a single product page.
So what are shop page, product category page, and a single product page?
Shop Page
You can refer to your Woocommerce settings if you’re unsure what your shop page is. Go to Woocommerce > Settings > Products > General > Shop Pages as seen in the picture above. This is the Woocommerce shop page that you set up when you first installed Woocommerce.
Product Category Page
If you have a few different categories for your products, you will have a few different product category pages. Basically these are Woocommerce pages for your product categories. Please refer to the image below:
Referring to the image above, if you go to Products > Categories and hover over your category, you will see a link that says “View”. When you click the link, you will be taken to the product category page for that category.
Single Product Page
A single product page is just a page of your Woocommerce product generated by Woocommerce on the front end of your website. Each product has its own page that your customers will see. Take a look at the image below:
When you hover over your product and click on the link that says “View” as seen in the picture above, you will be taken to the product page. This product page is what we called a “single product page”.
So if you are displaying your products on pages other than the ones listed above, the popup won’t work as intended.
You might ask, “So how can I make the popup work on custom pages?”.
To make the popup work on let’s say the homepage of your website, or other custom pages, you have to manually enqueue the necessary .js and .css files on those pages.
To enqueue the necessary files, copy and paste the codes below to your child theme’s functions.php file:
On line 5 of the code above, change “13” to the ID of your custom page. If you don’t know how to find the ID of your page, read this.
If you want to get the popup to appear on more than just one custom page, replace line 5 of the code above with the following:
if ( is_page( array( 13, 24, 1 ) ) ) { //CHANGE 13, 24, AND 1 TO THE ID's OF YOUR PAGES!
The number 13, 24, and 1 above are just examples. Again, change these numbers to the actual ID’s of your custom pages.
3. Check your server log for error caused by get_price_html().
Themes or plugins conflicts on your site could cause Woocommerce function get_price_html() to throw fatal error. This does NOT happen on clean installation of WordPress + Woocommerce + Woocommerce Upsell Popup (free and PRO).
So if you have followed all the instructions in the step 1 and 2 above and are still experiencing the problem, it’s a good idea to check your server logs for errors.
The error could look like this:
Fatal error: Call to a member function get_price_html() on a non-object in /home/user/public_html/wp-content/plugins/woocommerce-upsell-popup-pro/templates/thp-popup-template-default-mult.php
If you see this error in either your server logs or the popup itself, open the file shown in the error. The file is located in /wp-content/plugins/woocommerce-upsell-popup-pro/templates/thp-popup-template-default-mult.php
Now search for the following line in the file:
$formattedprice = $_product->get_price_html();
Replace the line above with this:
$formattedprice = wc_price($rawprice);
4. Check if you are using Divi theme or Divi builder.
It has been reported that in some cases, Divi theme or Divi builder could cause popup not appearing correctly. In this case, go to Divi Theme Options > Builder > Advanced. See screenshot below:
Clear or disable the option in the red square above to fix the issue. Thanks to Dominik Raberger for the heads up!
If none of the above solved your problem, please contact support.