How to get the Product image and title align in the checkout page

  • Resolved rafilathif

    (@rafilathif)


    3 years, 11 months ago

    Hi there.

    I have some css Support from you.

    Currently I’m using a URNA theme which is you can see here the exact my site demo theme page

    I install the cartflow free version very soon if I get benefit I’ll go for pro plan

    so Here is my support Question from Free version

    Look this checkout page product images here

    I need to make that image to be a 75px size I add the css code and I can able to get that result look like this When use bellow code

    .elementor img {
	max-width:75px
}

    But still my image is showing 280px x 280px not properly crop as per the content.
    Also I need to make the Product title become a middle of the table or content This is Also This is I can get the result using this Code 

    .elementor img {
    max-width: 75px;
    vertical-align: middle;
}

    But the Quantity is goes bellow the product image Kindly check this screenshot for more clear understand

    Best regards
    Rafilathif

    • This topic was modified 3 years, 11 months ago by rafilathif.
    • This topic was modified 3 years, 11 months ago by rafilathif.
    • This topic was modified 3 years, 11 months ago by rafilathif.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter rafilathif

    (@rafilathif)

    I check my home page after update this support. My whole site grid become a 75px when i use this code 

    .elementor img {
	max-width:75px
}

    So this CSS code in not the right one Please help me to get this work

    Regards
    Rafilahif

    Plugin Support CartFlows Team

    (@cartflows)

    Hello @rafilathif

    Actually, when you use the below code, it is applicable for the all the website because, you have’t added the CartFlows Parent class to select the images which are under CartFlows Shortcode.

    .elementor img {
	max-width:75px;
}

    So to fix this you can use the following code. 

    .wcf-embed-checkout-form .woocommerce-checkout .wcf-order-wrap .product-name img {
	max-width:75px;
}

    One the same note, let me tell you that the size which is displaying as 280px X 280px is cropped buy the WooCommerce and it is an actual size of image which are have modified using the CSS. This will not change the image size from 280px. It can be only changed problematically only.

    Now, as the image size is too git for the section, as well as the product name is long the quantity number is getting displayed on the second row.

    To add it on the same line, you can reduce the width of the image or you can increase the width of product name column.

    I hope this helps you.

    Please let me know in case you have any questions.

    Thread Starter rafilathif

    (@rafilathif)

    *product name column.*

    Can you please guide me on how to increase the name column. I have checked I could not find the name Column code there.

    Best regards
    Rafilathif

    Plugin Support CartFlows Team

    (@cartflows)

    Hello @rafilathif

    Thank you for getting back to us!

    If you want to add some css to the product name then you can use the following CSS selector

    .cartflows_step-template-default.woocommerce-page.woocommerce-checkout form #order_review td.product-name{
}

    I hope this helps you.

    Please let me know in case you have any questions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to get the Product image and title align in the checkout page’ is closed to new replies.