Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 11, 2024 at 5:46 pm #1466733
    Empatica

    Hello,
    I’ve installed Woocommerce in one of my websites because my customer wants to start selling products.
    The cart page and the checkout page are designed with WP Block Editor by default and that OK but when I add a new product I have the classic WP Editor. I have tried to use the ALB but there is not enough add-ons.
    Can you help me to customise the product page?
    Thanks,
    Karim

    September 12, 2024 at 4:26 am #1466770
    Ismael

    Hey Empatica,

    Thank you for the inquiry.

    We recommend using the default editor when creating products, as this will ensure that all product features function properly. Switching to the Advanced Layout Builder may limit the functionality of the product page, and as you have noticed, some product elements are not available in the builder. Please continue using the default editor for creating products. What customizations are you trying to add to the product page?

    Best regards,
    Ismael

    September 12, 2024 at 9:27 am #1466790
    Empatica

    Hey Ismael,
    Thanks for the confirmation about the ALB.
    I would like to change the columns size to make the left one (with the images) wider, about 60%
    Also I would like to hide the sidebar that appears down the images and the tab with the additional info.
    Finally I would like the show a breadcrumbs or at least the category of the product on the top of the page.
    Thanks for your help,
    Best regards,
    Karim

    September 13, 2024 at 4:33 am #1466866
    Ismael

    Hi,

    Thank you for the update.

    You can use this css code to adjust the width of the product image container.

    .single-product-main-image {
    width: 60%;
    margin-right: 50px;
    padding-bottom: 50px;
}

    To hide the sidebar, include this css:

    #top #main .single-product-main-image .sidebar {
    display: none !important;
}

    And to include the breadcrumbs, please set the Enfold > Header > Header Layout > Header Title and Breadcrumbs settings to the first option.

    Best regards,
    Ismael

    September 15, 2024 at 1:02 pm #1467028
    Empatica

    Hey Ismael,
    Thanks for your answer.
    Unfortunately when I set the product image column to width 50%, the image is blurred. That’s because when the image is loaded, it has attribute Width and Height set to “450”

    <img width="450" height="450" src="https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-450x450.jpg" class="attachment-shop_single size-shop_single" alt="Corona funerària - tons blancs" decoding="async" srcset="https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-450x450.jpg 450w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-300x300.jpg 300w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-1030x1030.jpg 1030w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-80x80.jpg 80w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-768x768.jpg 768w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-36x36.jpg 36w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-180x180.jpg 180w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-705x705.jpg 705w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-120x120.jpg 120w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-800x800.jpg 800w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-100x100.jpg 100w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main-50x50.jpg 50w, https://www.jordinabravo.com/wp-content/uploads/2024/09/corona-tons-bancs-main.jpg 1440w" sizes="(max-width: 450px) 100vw, 450px">

    I’ve tried to change the settings in Appearance > Woocommerce > Product Images, but it didn’t solve the problem.
    I’ve also tried to re-load the images and clear cache, but nothing.

    Do you know what I can do?
    Best regards,
    Karim

    September 16, 2024 at 6:10 am #1467054
    Ismael

    Hi,

    Thank you for the update.

    Try to add this filter in the functions.php file to change the thumbnail size in the single product page:

    function avf_single_product_thumbnail_size( $size ) {
    return 'full'; 
}
add_filter( 'single_product_small_thumbnail_size', 'avf_single_product_thumbnail_size' );

    Best regards,
    Ismael

    September 16, 2024 at 12:56 pm #1467085
    Empatica

    Perfect! It works like a charm.
    Many thanks for your help.
    Best regards,
    Karim

    September 16, 2024 at 3:00 pm #1467105
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    September 17, 2024 at 12:41 pm #1467196
    Empatica

    You can close it.
    Best regards,
    Karim

    September 17, 2024 at 4:03 pm #1467208
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Woocommerce product page template using block editor’ is closed to new replies.