• crazyd943

    (@crazyd943)


    Hello,

    I’m having trouble formatting the gift card product page. With both the default hook placement and placing via Elementor elements, the formatting is really off.

    Firstly the layout is squashed and inline, the text and buttons also ignore site defaults so the ability to style those also would be great.

    Please see link – the issue is apparent.

    Any help you could offer in fixing the styling would be much appreciated!

    Kind regards

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Juan Coronel

    (@juaancmendez)

    Hi there,
    we hope you’re doing well!

    From what we can see, Elementor adds extra styles that intervene with ours. In order to correct the display error, add this CSS in Appearance > Customize > Additional CSS:

    .woocommerce div.product.elementor form.cart:not(.grouped_form):not(.variations_form) {
      flex-direction: column !important;
    }

    Give it a try and let us know any news, please.

    Have a nice day!

    Thread Starter crazyd943

    (@crazyd943)

    Hi Juan,

    Thanks for getting back to me.
    The above CSS has fixed the layout of the Gift Card product form, thanks!

    Could you also please suggest css for styling the headings and buttons in the form so I can style them more in line with the rest of the site? If you could give a rough framework or similar I can substitute in the existing styling css used elsewhere.

    Much appreciated!

    • This reply was modified 3 years ago by crazyd943.
    Plugin Support Juan Coronel

    (@juaancmendez)

    Hi there,

    Could you send us an image explaining in more detail the changes you want? We will gladly help you.

    We will be attentive to your response.

    Have a nice day!

    Thread Starter crazyd943

    (@crazyd943)

    Hi Juan,

    Please see this image: https://ibb.co/XjHgc1V

    Cheers!

    Plugin Support Christian Rodríguez

    (@christianrh)

    Hello there,

    hope you are doing well ??

    For the image aspect ratio try the following CSS code:

    .product.product-type-gift-card form.gift-cards_form.cart .ywgc-design-list .ywgc-preset-image img {
    	height: unset;
    }

    You can change the font with this rule and your desired font-family:

    .product.product-type-gift-card form.gift-cards_form.cart h3, .product.product-type-gift-card form.gift-cards_form.cart h5 {
    	font-family: ;
    }

    The button styles can be changed with this CSS rule (set your desired values):

    .product.product-type-gift-card form.gift-cards_form.cart .gift-cards-list button.ywgc-predefined-amount-button {
    	background-color: !important;
      	color: !important;
            font-family: ;
      	font-size: ;
      	padding: !important;
    }

    About the checkbox positioning you can fix it with this code:

    .product.product-type-gift-card form.gift-cards_form.cart .ywgc-delivery-notification-checkbox-container {
    	display: flex;
     	align-items: center;
        justify-content: right;
    }
    
    .product.product-type-gift-card form.gift-cards_form.cart .ywgc-delivery-notification-checkbox-container  .gift-card-content-editor.step-content input {
      	width: auto;
      	margin-right: 10px;
    }

    Let us know any news, please.

    Have a nice day!

    Thread Starter crazyd943

    (@crazyd943)

    Hi Christian,

    Thank you very much, that has worked like a charm!

    The only exception is the notification checkbox I’m afraid – https://ibb.co/sRRGrVL

    Héctor.G

    (@hectorgc)

    Hi there,

    Please, try this new CSS

    .gift-card-content-editor.step-content input{
       width: 20px;
    }

    Let us know, please.

    Have a nice day!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Product page styling broken’ is closed to new replies.