[Resolved] How to edit a WooCommerce single product page’s

Home Forums Support How to edit a WooCommerce single product page’s

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1474366
    C么me

    Hi,

    This is my first site with GeneratePress, but not with WordPress.
    I installed the “niche” layout from the GeneratePress’s site library.

    Can you tell me how can I manage to :
    1) edit the default size of the single product image
    1.1) or the default size of the columns
    2) edit the product title font size and place

    I was hoping that Gutenberg was able to edit this archive, as it can edit pages and articles too.

    Thank you very much,
    C么me

    #1474488
    David
    Staff
    Customer Support

    Hi there,

    welcome to GP!

    First make sure you have the Woocommerce module enabled in Appearance > GeneratePress:

    https://docs.generatepress.com/article/woocommerce-overview/

    This will add a ton of styling options.

    1. Setting the Image size is controlled by Woocoomerce In Customizer > Woocommerce –> Product Images –> Main Image width.

    So if for example you have a 1200px wide Container, and Product Image Area Width is set to 50% you should set your Woo image to 600px.

    1.1 Hopefully the above Image Area Width covers that need. Let me know.

    2. For Product Archive (shop) titles you have sizes in Customizer > Typography > Woocommerce and colors in Customizer > Colors > Woocommerce.

    For the single product you can set the Sizes in Customizer > Typography > Headings –> Heading 1 (H1).
    Note this is the global H1 and will apply across the site.

    You can override this for single posts or products by setting the Single Content Title (H1).
    This allows you to have a different typography style just for those post types.

    Hopefully Woo will implement Block Editing in the near future 馃檪

    #1475967
    C么me

    Hi,
    Thank you for your help.

    Setting the Image size did’nt work, as you can see in this gif : http://g.recordit.co/YvcAQ9kM4i.gif

    Can you tell me you how to edit the container width ?

    For the product title, I used the .product-title CSS class, as I don’t want all H1 titles to be resized on the whole site.

    Thank you very much,
    C么me

    #1475979
    Ash

    Layout > Woocommerce > Product Image Area Width

    #1476010
    C么me

    Hi,
    Thank you but it does’nt work, as you can see here :
    https://recordit.co/B0QDl8h1Ct/

    I did’nt change anything from the site library’s template.

    Thanks,
    C么me

    #1476197
    David
    Staff
    Customer Support

    Ok – so Niche has custom PHP/CSS to create the Sticky gallery.
    To change the image / summary widths go to Customizer > Additional CSS and look for this:

    .woo-summary-wrap {
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: auto;
        margin-bottom: 80px;
    }

    This line: grid-template-columns: 60% 40%; sets the widths Image: 60% | Summary 40%

    Change those two values to what you need.

    #1476200
    C么me

    It worked !

    Thank you very much,
    Have a nice day 馃榾

    C么me

    #1476250
    David
    Staff
    Customer Support

    You’re welcome

    You may find some of the Blog posts that are in the Niche Demo of use – it explains the customizations. here for example:

    https://gpsites.co/niche/the-single-product/

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