Button position Over the Product Image not working

Forget it. Found it within chatgpt:
Added this within the Extra CSS withing the template:

/* Center the button in the middle of the product image / .addonify-qvm-button, .addonify-qvm-button.addonify-qv-shortcode-button, .wc-block-grid__products .product .button.addonify-qvm-button, .wc-block-grid__products .wc-block-grid__product .button.addonify-qvm-button, .woocommerce ul.products .product .button.addonify-qvm-button, .woocommerce ul.products .wc-block-grid__product .button.addonify-qvm-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; / Ensures the button appears above other elements / background: rgba(255, 255, 255, 0); / Makes the background transparent / border: none; / Removes borders / color: inherit; / Keeps the text color consistent with the theme / transition: all 0.3s ease; / Smooth transition for hover effects */
}

/* Ensure the product image container is positioned relative to the button */
.product-image-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

/* Keep the button transparent on hover / .addonify-qvm-button:hover, .addonify-qvm-button.addonify-qv-shortcode-button:hover, .wc-block-grid__products .product .button.addonify-qvm-button:hover, .wc-block-grid__products .wc-block-grid__product .button.addonify-qvm-button:hover, .woocommerce ul.products .product .button.addonify-qvm-button:hover, .woocommerce ul.products .wc-block-grid__product .button.addonify-qvm-button:hover { background: rgba(255, 255, 255, 0); / Transparent background on hover / border: none; / No border on hover / color: inherit; / Keep the text color as it is */
}

/* Adjust the icon size to 40px x 40px / .addonify-qvm-button .icon svg, .addonify-qvm-button.addonify-qv-shortcode-button .icon svg, .wc-block-grid__products .product .button.addonify-qvm-button .icon svg, .wc-block-grid__products .wc-block-grid__product .button.addonify-qvm-button .icon svg, .woocommerce ul.products .product .button.addonify-qvm-button .icon svg, .woocommerce ul.products .wc-block-grid__product .button.addonify-qvm-button .icon svg { align-items: center; display: inline-flex; height: 40px; / Set height to 40px / line-height: 1; / Ensures proper line height / width: 40px; / Set width to 40px */
}

• This reply was modified 2 months ago by osositno.
• This reply was modified 2 months ago by osositno.

Hi @osositno

We are happy that you have found the solution.

If you need further assistance or have any question, let us know.

For now we are closing this topic.

Best regards.