Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3137240
How to Change the Size of Image and Width of Product Title
Closed

Comments

  •  4
    [email protected] started the conversation
    October 2, 2022 at 5:13pm

    Hi there,

    I want to increase the size of the product image to 200px*200px.
    Also, I want to reduce the width of the product title section.

    Here is the link to the product: https://thechefhouse.vn/shop/product/test/

    Please let me know how to do that.

    Thanks and looking forward o your update soon.

    Regards,
    Tan Nguyen


  •  767
    Janilyn replied
    October 3, 2022 at 10:28am

    Hi Tan,

    Thank you for contacting WPClever Support Forum. 

    We’ve received your ticket and assigned one of our developers to help you with that. 

    He’ll be looking into your question and responding with specific instructions as soon as possible. 

    Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

    Best regards.

    Janilyn T. - WPClever Support Agent

  •  4
    [email protected] replied
    October 3, 2022 at 10:41am

    Hi Janilyn,

    Thanks for your response. Looking forward to the response of the developer soon.

    Regards,

    Tan Nguyen

  •  153
    Henry replied
    October 3, 2022 at 12:20pm

    Hi,

    Do you want this? https://www.screencast.com/t/PWwNFmbZ0

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    /* Wpclever team support ticket-3137240 */
.woosb-wrap .woosb-products .woosb-product .woosb-quantity .woosb-qty {
    font-weight: normal;
    font-size: 100%;
}
@media only screen and (min-width: 991px) {
    .woosb-wrap .woosb-products .woosb-product .woosb-thumb {
        width: 200px;
        flex: 0 0 200px;
    }
}

    Best regards,
    Henry N.

  •  4
    [email protected] replied
    October 3, 2022 at 12:59pm

    Hi Henry,

    That's the thing I want but I have a few tweaks to fit each device:

    All device:
    - The product title is aligned center

    For tablet:
    - The size of the image is 150px

    For mobile:
    - It will be divided into two lines for 1 product
    + The first line will be the image is the product title
    + The second line will be quantity and price
    - Besides, the size of image is 100px

    Please help me to change its layout.

    Thanks

  •  153
    Henry replied
    October 4, 2022 at 12:31am

    Hi,

    Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    /* Start - Wpclever team support ticket-3137240 */
.woosb-products .woosb-product .woosb-title {
    text-align: center;
}
.woosb-wrap .woosb-products .woosb-product .woosb-quantity .woosb-qty {
    font-weight: normal;
    font-size: 100%;
}
@media only screen and (min-width: 991px) {
    .woosb-wrap .woosb-products .woosb-product .woosb-thumb {
        width: 200px;
        flex: 0 0 200px;
    }
}
@media only screen and (max-width: 820px) and (min-width: 415px) {
    .woosb-wrap .woosb-products .woosb-product .woosb-thumb {
        width: 150px;
        flex: 0 0 150px;
    }
}
@media only screen and (max-width: 414px) {
    .woosb-products .woosb-product {
        flex-direction: column;
        justify-content: center;
    }
    .woosb-products .woosb-product > div {
        width: 100%;
        flex-basis: 100%;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
   .woosb-products .woosb-product .woosb-thumb {
        width: 80px;
        flex: 0 0 80px;
   }
   .woosb-products .woosb-product .woosb-thumb img {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        height: auto;
   }
    .woosb-products .woosb-product .woosb-title {
        text-align: center !important;
    }
    .woosb-products .woosb-product .woosb-title .woosb-title-inner {
        padding: 5px 0;
    }
    .woosb-products .woosb-product .woosb-qty, .woosb-products .woosb-product .woosb-price {
        width: auto !important;
        flex-basis: auto !important;
    }
    .woosb-products .woosb-product .variations {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    .woosb-products .woosb-product .variations .reset {
        display: none !important;
    }
}
/* End - Wpclever team support ticket-3137240 */

    Best regards,
    Henry N.

  •  4
    [email protected] replied
    October 5, 2022 at 8:53am

    That's great, thanks for your response

  •  153
    Henry replied
    October 5, 2022 at 1:15pm

    If you need help from us at any time, feel free to reach out to us. We are always ready to help.

    Best regards,
    Henry N.

  •  2
    Umut replied
    November 13, 2022 at 10:41am

    Can you also add to this code, the price after title. because at the moment it is on top of each other

  •  153
    Henry replied
    November 14, 2022 at 9:17am

    Can you send me the product link?

    https://thechefhouse.vn/shop/product/test/ does not exist.

    Best regards,
    Henry N.

  •  2
    Umut replied
    November 17, 2022 at 10:29pm

    Problem is solved. thank you

  •  153
    Henry replied
    November 20, 2022 at 5:53am

    If you need help from us at any time, feel free to reach out to us. We are always ready to help.

    Best regards,
    Henry N.