Home Forums Weaver Xtreme Theme Split: WooCommerce Product Pages – enormous images

Topic Resolution: Investigating

This topic contains 8 replies, has 4 voices, and was last updated by  Weaver 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #47448

    chalacha
    Participant

    Hey there – I am new here and have been searching the forum for the last couple days and am going in circles.  I specifically searched: “woocommerce styling fixes”,  but this is the one and only post containing that search criteria.

    I noticed that several people asked the same question:  Woocommerce Images on product pages are too large and the text is below/right of the product image and gallery.  And for some reason the Related Products title ends up near the top.  I recently converted an “inherited” site from Weaver II to Weaver Xtreme.  I thought I saved and replaced all custom CSS, but it appears that something is going wrong.

    I have tried the following rules in my Custom CSS:

    .container-woocommerce .entry-summary {clear:none;}
    .woocommerce .entry-summary {clear:none;}
    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {clear:none;}

    None appear to change anything.

    http://vevosports.com/product/knobcuff-ez-taper/

    Is one of the many product pages – ALL of which are displaying similarly.  Any help would be appreciated.  Thanks!!!

     

     

     

     

    #47454

    Weaver
    Keymaster

    I’ve split this topic because you hijacked a very old topic.

    #47464

    scrambler
    Moderator

    Pay attention to your CSS syntax 🙂

    You have a syntax error in a rule just before the one for woocommerce, missing a semi colon (in yellow below)

    When a rule does not work, always run all your custom CSS, the way to know if it is because of a broken CSS file, is to inspect the page with your browser developer tools, and see if the rules shows up as applied to the elements. Then just run all your Custom CSS through a validator to hunt for the error.

    .fun3 {
    -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
    border-radius: 2px;
    background-color:#d5de2d;
    color:#000000;
    width:100%
    padding-top:80px;
        padding-right:10px;
        padding-bottom:50px;
        padding-left:10px;
    clear:both;
    }

    #47560

    chalacha
    Participant

    Thanks for the reply, Scrambler.  I’ve been an HTML guy for years but am just learning CSS.
    I tried removing all Custom CSS and after saving, no changes were reflected.  (just to test what the CSS was doing)
    I pasted all the Custom CSS back and added the semicolon as you instructed (after the width:100%;)  Still no luck.  No change in page layout.

    I must have more than that single error.  I will continue to explore.

    #47569

    scrambler
    Moderator

    Indeed you do 🙂

    You have a meesed up rule below that has an extra open quote. It looks like a piece of the rule was deleted

    /* CSS+ Rules */
    .menu-primary .wvrx-menu-container ul.wvrx-menu {margin-left:0px;}
    .menu-primary .wvrx-menu ul li a,.menu-primary .wvrx-menu ul.mega-menu li {ul.wvrx-menu {margin-left:0px;}
    .menu-secondary .wvrx-menu ul li a,.menu-secondary .wvrx-menu ul.mega-menu li {font-variant: small-caps;}
    .widget-area-top {margin-top:10px;}
    .widget-title {border-bottom: 2px solid #737373; font-variant: small-caps;}

    #47587

    chalacha
    Participant

    Those rules were temporary efforts to change minor aspects of the layout and were only in place for a moment.  I am adding and removing rules every couple hours when I think I have found a solution.  I removed all rules associated with the menus and widget areas and as of this writing, my Custom CSS is BLANK. The product pages still appear the same.  Is there no way to set up a CSS class for products or edit an existing CSS file specifically for all products to control the layout?

    http://vevosports.com/product/gamechanger/

    Main Photo is too large and fuzzy (Exceeds my specified woocommerce designation of 350×350 specified in woocommerce>settings>products>display)
    Thumbnails are also larger that I have specified in woocommerce>settings>products>display

    The Item summary is below and to the right of photos, not aligned up top with the main image.
    No CSS Rules are helping so I must have an option in the content areas not selected properly.

    I have spent more time on this single issue now than the entire conversion of the site to Weaver Xtreme.  At a total loss.

    #47589

    thesurge
    Participant

    I just got this working with Safari browser tools, you need to do something along the lines of the CSS below. As the page width is around 1600px woo commerce will scale up your images as the 2 columns are set to 48% width. So if you want to display them at that size you should change the images sizes under woo commerce – settings to something larger, such as 800px x 800px.

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 58%; – (make the right hand column wider)
    clear: none;
    }

    .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: 38%;  – (make the left hand column narrower)
    }

     

     

    #47590

    chalacha
    Participant

    Thank you!  That worked to control the column width!  I went with 60/36% and it looks much better.  I will need to Regenerate thumbnails again after designating different sizes to clear them up.

    ***Now I need to figure out how to get the product summary aligned top with the main image.

    **EDIT

    For some reason this now works after not working all weekend >>>

    .single-product .entry-summary {clear:none;}

     

    #47592

    Weaver
    Keymaster

    Styling that does not work, then later works is a symptom of caching.

    This can be from a plugin on your website, from you hosting company, from a content delivery service like Cloudflare, or finally from your browser. Chrome is especially aggressive with caching.

    So if you have caching at any of these spots, you should try to disable it when developing.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.