ARTICLE AD BOX
I'm using code that displays a popup notification about adding a product to cart.
// Registration of styles and scripts add_action('wp_enqueue_scripts', 'enqueue_custom_woocommerce_popup_script'); function enqueue_custom_woocommerce_popup_script() { // Registering Styles add_action('wp_head', 'custom_popup_css'); // Enabling inline-JS in the footer add_action('wp_footer', 'custom_popup_js'); } // CSS output function in head function custom_popup_css() { ?> <!-- Custom styles for the popup --> <style> .woo-add-to-cart-popup { position: fixed; top: 50px; right: 20px; background-color: #f8f8f8; color: black; padding: 10px 20px; border-radius: 5px; font-size: 14px; z-index: 9999; transition: opacity 0.5s ease-in-out; animation: slideInRight 0.5s forwards; } @keyframes slideInRight { from { transform: translateX(-10%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } </style> <?php } // The JavaScript output function immediately before the closing body tag function custom_popup_js() { ?> <script> jQuery(document).ready(function($) { function showPopup(message) { const popup = document.createElement("div"); popup.className = "woo-add-to-cart-popup"; popup.textContent = message; document.body.appendChild(popup); setTimeout(() => { popup.style.opacity = "0"; // Smooth fade setTimeout(() => { document.body.removeChild(popup); // Removes the element completely after one second. }, 500); // Waiting time after the start of smooth fading }, 2000); // The message is displayed for 2 seconds. } $('body').on('added_to_cart', function(event, fragments, cart_hash, button) { let product_name = ''; // Variable for storing the product name // We check if we are on a single product page if($(button).closest('.single-product')) { // If yes, we extract the product name from the h1 heading product_name = $('.single-product .product_title').text(); } else { // Otherwise, we consider this to be a shop page. product_name = $(button).closest('.product').find('.wd-entities-title').text(); } // Additional check in case of missing text if(!product_name || product_name.trim().length === 0) { product_name = $(button).data('product_title') || ''; } // Displaying a message about adding an item to the cart showPopup(`"${product_name}" added to cart`); }); }); </script> <?php }My website uses the Woodmart theme, which uses different styles for the product title. On the single product page, the notification works correctly, but on the shop page, the product title doesn't appear in the notification.
Here is a screenshot of the html structure:
How can I correct my code so that the product title appears in the notification?
