I need my second button on my product page to appear and align perfectly to the main button

Site URL: https://mudramarketinggroup.com/

Hi! I hope someone can help me because I'm going bananas here... I need to add a secondary button that appears next to the main button on my product page, the problem is that I cannot figure out how to align them and with the same size. 
This is the code I've injected on the footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Move the button inside the add-to-cart button wrapper
    $('section.ProductItem-additional .button-block').appendTo('.ProductItem-details .sqs-add-to-cart-button-wrapper');

    // Inject the CSS dynamically into the head section
    $('head').append(`
      <style>
        /* Wrapper for the buttons */
        .ProductItem-details .sqs-add-to-cart-button-wrapper {
            display: flex;
            justify-content: space-between; /* Spread the buttons evenly */
            gap: 5px; /* Space between buttons */
            width: 50%; /* Ensure the container takes full width */
            box-sizing: border-box; /* Ensure padding and border do not affect width */
        }

        /* Style both buttons equally */
        .ProductItem-details .sqs-add-to-cart-button-wrapper .button,
        .ProductItem-details .sqs-add-to-cart-button-wrapper .button-block {
            flex-grow: 1; /* Make both buttons take up the same amount of space */
            text-align: center; /* Center the button text */
            padding: 5px; /* Adjust padding for button size */
            background-color: none; /* Adjust button background color */
            color: white; /* Button text color */
            border: none; /* Remove border */
            border-radius: none; /* Add rounded corners */
            box-sizing: border-box; /* Ensure padding doesn’t affect size */
            transition: all 0.3s ease; /* Smooth transitions */
        }

        /* Ensure shadow and size are consistent */
        .ProductItem-details .sqs-add-to-cart-button-wrapper .button-block {
            box-shadow: none; /* Remove shadow if present */
        }

        /* Hover effect (optional) */
        .ProductItem-details .sqs-add-to-cart-button-wrapper .button:hover,
        .ProductItem-details .sqs-add-to-cart-button-wrapper .button-block:hover {
            background-color: none; /* Darken background on hover */
        }

        /* Mobile adjustments */
        @media screen and (max-width: 767px) {
            .ProductItem-details .sqs-add-to-cart-button-wrapper {
                flex-direction: column; /* Stack buttons vertically on mobile */
            }

            .ProductItem-details .sqs-add-to-cart-button-wrapper .button,
            .ProductItem-details .sqs-add-to-cart-button-wrapper .button-block {
                width: 100%; /* Ensure buttons take full width on mobile */
            }
        }
      </style>
    `);
  });
</script>

Can you share link? I tried checking a product but don't see second button

https://mudramarketinggroup.com/store/p/seo-guide-for-beginners

Hi Tuanhpan and thanks for replying to me so fast! Sorry I was trying to work on the content for the product page. I am new to coding and it's so hard to customise the product page as I want it. I also want to change the live demo button.

Here is the link:

https://mudramarketinggroup.com/store/p/951uov7mqi58da9vbgtwf0sape3ca0

On 10/9/2024 at 11:16 AM, popcornnomad said:

Hi Tuanhpan and thanks for replying to me so fast! Sorry I was trying to work on the content for the product page. I am new to coding and it's so hard to customise the product page as I want it. I also want to change the live demo button.

Here is the link:

https://mudramarketinggroup.com/store/p/951uov7mqi58da9vbgtwf0sape3ca0

First, to align text same line, you can use this code to Website Tools > Custom CSS

div.sqs-add-to-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

to make both same height, use this CSS code

div.ProductItem-quantity-add-to-cart .button-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Do you need to make both same width?

Omg thanks so so much for your help! and yeah I would love to have them the same size 🙂

On 10/11/2024 at 1:43 PM, tuanphan said:

First, to align text same line, you can use this code to Website Tools > Custom CSS

div.sqs-add-to-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

to make both same height, use this CSS code

div.ProductItem-quantity-add-to-cart .button-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Do you need to make both same width?

 

Yes please! 🙂

On 10/11/2024 at 1:43 PM, tuanphan said:

First, to align text same line, you can use this code to Website Tools > Custom CSS

div.sqs-add-to-cart-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

to make both same height, use this CSS code

div.ProductItem-quantity-add-to-cart .button-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Do you need to make both same width?

 

Thanks so so much for your help!

I've added a perfect aligned second button to my Product page.

This page is my template page, but I need to duplicate it as I have multiple products. This live demo button needs to be directed to different URL's, is there any way I can do it, without duplicating the code injection on the footer for each product?

1 hour ago, popcornnomad said:

This live demo button needs to be directed to different URL's

Instead of adding a script to the Code Injection Footer, it would be better to add it to a Code Block in the Product's Additional Info section. You can then customise the script for each Product Detail Page (PDP), adding an anchor tag with a custom href attribute dynamically.

Hi Paul!

Thanks so much for your reply, yeah I don't know why I tried to complicate it so much now it works perfectly! Again thanks, sometimes you just need someone to take you out of your head...