[Resolved] Woocommerce Hook under product image?

Home Forums Support Woocommerce Hook under product image?

  • This topic has 28 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #976934
    David

    Hello

    Is there a hook position for underneath the product image?

    Thanks
    Dave

    #976950
    David
    Staff
    Customer Support

    Hi there,

    for the product archives this:

    woocommerce_shop_loop_item_title

    For the single product its more tricky.
    There is this deprecated hook that works only if there is no thumbnail carousel:

    woocommerce_product_thumbnails

    Or hook it after the summary and use some to reposition it:

    woocommerce_after_single_product_summary

    #976966
    David

    Thanks David, I can’t see the woocommerce_product_thumbnails hook.

    I’ve added it to woocommerce_after_single_product_summary but it appears to low down after the product image…

    http://185.20.51.60/~envirotechalarms/product/50mm-to-300mm-wras-approved-water-meters/

    Anyway I can get it to go directly under the product image?

    #976975
    David
    Staff
    Customer Support

    If you’re not adding any additional images to the products ( so no carousel ) then you can use add this woocommerce_product_thumbnails by selecting the Custom Hook from the list and adding it to the field provided.

    If thats no good then it will take a bit of customization. Which i can help with.

    #976990
    David

    Some products may require some additional images, so the carousel will probably use – any help would be great.

    Thanks
    Dave

    #977063
    David
    Staff
    Customer Support

    Gonna be tricky one – on mobile where do you want the PDF docs to be displayed? Still below the image or below the summary?

    #977067
    David

    Below the summary on mobile would be great David.

    #977082
    David
    Staff
    Customer Support

    In that case we can try this CSS:

    @media(min-width: 769px) {
        .woocommerce div.product {
            display: grid;
            grid-template-columns: 50% 50%;
        }
    
        .woocommerce div.product>div {
            grid-column: 1 / 3;
        }
    
        .woocommerce #content div.product div.images,
        .woocommerce div.product div.images,
        .woocommerce-page #content div.product div.images,
        .woocommerce-page div.product div.images {
            width: 100% !important;
            grid-column: 1;
            grid-row: 1/3;
        }
    
        .woocommerce .product .entry-summary {
            grid-column: 2;
            grid-row: 1 / 5;
            padding-left: 40px;
        }
    
        .woocommerce .product .pdf-docs {
            grid-column: 1;
            grid-row: 3;
            align-self: start;
        }
    }

    In your pdf-docs css remove the max-width: 48%; so it fills the first column.

    Prefixed version:

    @media(min-width: 769px) {
        .woocommerce div.product {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 50% 50%;
            grid-template-columns: 50% 50%;
        }
    
        .woocommerce div.product>div {
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1 / 3;
        }
    
        .woocommerce #content div.product div.images,
        .woocommerce div.product div.images,
        .woocommerce-page #content div.product div.images,
        .woocommerce-page div.product div.images {
            width: 100% !important;
            -ms-grid-column: 1;
            grid-column: 1;
            -ms-grid-row: 1;
            -ms-grid-row-span: 2;
            grid-row: 1/3;
        }
    
        .woocommerce .product .entry-summary {
            -ms-grid-column: 2;
            grid-column: 2;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1 / 5;
            padding-left: 40px;
        }
    
        .woocommerce .product .pdf-docs {
            -ms-grid-column: 1;
            grid-column: 1;
            -ms-grid-row: 3;
            grid-row: 3;
            -ms-grid-row-align: start;
                align-self: start;
        }
    }
    #977269
    David

    Works perfectly 🙂 thanks David!

    #977272
    David
    Staff
    Customer Support

    Great to hear and glad to be of help.

    #1001580
    David

    Hi David

    I’ve had to test this page in Edge 15 on Windows 10 and the product page is showing up in 1 column…

    https://ibb.co/BZn3ysJ

    http://185.20.51.60/~envirotechalarms/product/leakstopper1/

    Any ideas how to sort this in Edge 15 on Windows 10?

    Thanks
    Dave

    #1001582
    David
    Staff
    Customer Support

    Try running the CSS provided through an autoprefixer to give you the MS varients:

    https://autoprefixer.github.io

    #1001587
    David

    Thanks David, should I run the whole css file through this?

    #1001595
    David
    Staff
    Customer Support

    The CSS i provided here. It will add a load of prefixed versions for MS-Grid to the code.

    #1001603
    David

    It didn’t like it…

    https://ibb.co/80vbhSw

Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.