/*
Theme Name:   Xstore child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/


function add_custom_learn_more_button_script() {
    if ( is_shop() || is_product_category() || is_product_tag() || is_search() || is_archive() ) {
        ?>
        <script>
        document.addEventListener("DOMContentLoaded", function () {
          const productItems = document.querySelectorAll('.etheme-product-grid-item');

          productItems.forEach(function (item) {
            const productLink = item.querySelector('a.woocommerce-LoopProduct-link');
            const productUrl = productLink ? productLink.getAttribute('href') : '#';

            const learnMoreBtn = document.createElement('a');
            learnMoreBtn.href = productUrl;
            learnMoreBtn.innerText = 'Learn More';
            learnMoreBtn.className = 'custom-learn-more-button';

            const cartBtn = item.querySelector('.etheme-product-grid-content .etheme-product-grid-button');
            if (cartBtn && !item.querySelector('.custom-learn-more-button')) {
              cartBtn.parentNode.insertBefore(learnMoreBtn, cartBtn);
            }
          });
        });
        </script>

        <style>
        .custom-learn-more-button {
          display: inline-block;
          padding: 10px 16px;
          margin-bottom: 12px;
          border: 1px solid #024087;
          border-radius: 12px;
          background-color: #ffffff;
          color: #024087;
          font-weight: 600;
          font-size: 14px;
          font-family: inherit;
          line-height: 1.4;
          text-align: center;
          text-decoration: none;
          transition: all 0.3s ease;
          width: 100%;
          box-sizing: border-box;
        }
        .custom-learn-more-button:hover {
          background-color: #024087;
          color: #ffffff;
        }
        </style>
        <?php
    }
}
add_action('wp_footer', 'add_custom_learn_more_button_script');