Add custom button below wishlist button in PDP

Question

We are using PWA venia theme 2.4.5. We are trying to add a button below ADD TO WISHLIST in PDP Page

We tried the below code . but we are not seeing any button.

{
  isMobile && (
    <div className={classes.cartActionButton}>
      <div className="px-3 h-[46px] m-auto w-full">
        {cartActionContent}
        <Suspense fallback={null}>
          <WishlistButton {...wishlistButtonProps} style={{ color: "red" }} />
        </Suspense>
        <button type="button">Custom button</button>
      </div>
    </div>
  );
}

Here is ProductFullDetail.js : https://pastebin.com/YBD5f5bG

Answer 1

Here I have added a button code placed after WishlistButton button code line no. 984 into your file

<button
    className="custom-button"
    style={{
        background: linear-gradient(90deg, rgb(199, 164, 111) 0%, rgb(136, 108, 68) 100%);
        width: 100%;
        height: 40px;
        border-radius: 5px;
        color: rgb(255, 255, 255);
        letter-spacing: 4px;
        position: relative;
        top: 10px;
        justify-content: center;
    }}
>
    Custom Button
</button>

and remove this button code from line no. 1032

<button type="button">Click Me</button>

please add this code and try to add code.

Answer 2

You can find the {cartActionContent} code in your ProductfullDetail.js

and then add the code below like :

{cartActionContent}
<Suspense fallback={null}>
   <WishlistButton {...wishlistButtonProps} />
</Suspense>

Answer 3

Try replacing :

<button type="button">Custom button</button>

to

<LinkButton
    className={
        ' max-h-[35px] py-2 focus:outline-none'
    }
    onClick={() =>
        alert('test');
    }
>
    <ChevronRight
        size={20}
        className="rounded-full border border-[#C77F44] text-[#C77F44]"
    />
</LinkButton>