Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Woocommerce Full-Width Images?

Home Forums Support Woocommerce Full-Width Images?

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #385675
    Coulter

    I’m working on a redesign for one of my sites and I’d like my product images to be large and centered above the Add To Cart, Quantity, etc…

    Something similar to this style: http://nitro.woorockets.com/niche-22/product/dior-prestige/

    I’m sure there’s a lot of CSS jujitsu going on, but would this be possible without too much hacking?

    Thanks!

    GeneratePress 1.4
    GP Premium 1.4.3
    #385740
    Tom
    Lead Developer
    Lead Developer

    Interesting layout – any chance you can link me to what you have so far?

    #386144
    Coulter

    Yeah, I really like that layout style. Unfortunately, I don’t really have anything yet. When it comes to CSS I’m good with changing colors and adjusting padding/margin, etc… but I’m not yet skilled with large-scale layout changes, especially if they need to be responsive.

    I guess I don’t really know where to start with something like this. I just need a more experienced opinion. Is this something I can do within Generatepress?

    #386187
    David
    Staff
    Customer Support

    If you don’t mind i am going to follow this as working on something similar. I would like to see Tom’s view.
    It’s a pretty heavy CSS hack to achieve this as the basic woo template is only made up of a few parent containers and all of the product summary lives inside just one.
    My current project is shortcoding all the elements to hook them elsewhere but i have been toying with CSS grid and that definitely has potential.

    #386303
    Tom
    Lead Developer
    Lead Developer

    It would involve some pretty heavy CSS. If someone wants to provide a basic template for me to start from, I can do something up in Inspect Element which would at least be a starting point 🙂

    #386586
    Coulter

    I managed to hack this together:

    https://staging1.pupperprints.com/product/beagle-tote/

    I was basically guessing, so I’m not sure how great the CSS is. Also, I have no idea how to liberate the “Add To Cart” section from the .summary container like the example layout shows.

    The code I have totally fails with responsiveness, but I think the default styles are fine for mobile. I’d rather have a standardized mobile exerience to increase conversions and usability.

    #386648
    David
    Staff
    Customer Support

    That’s very impressive. I would love to see the style sheet.
    I use the following code snippet to create a duplicate button so you can then hook it elsewhere in the template:

    function diggs_cart_button () {
    	global $post , $product;
      	$product_id = $product->get_id();
      	$product = wc_get_product( $product_id );
    	ob_start();
    	  	echo "<a href='".$product->add_to_cart_url()."'>add to cart</a>";
    	return ob_get_clean();
    }
    add_shortcode ('diggs-cart-button', 'diggs_cart_button' );

    It doesn’t have any conditionals – so it won’t disable on out of stock or what not. But see if you can use it.

    Here’s a good visual hook guide for Woo – in case you don’t have it.

    #386969
    Tom
    Lead Developer
    Lead Developer

    I wonder if you could do this for the add to cart button..

    add_action( 'wp', 'tu_move_single_wc_addtocart_button' );
    function tu_move_single_wc_addtocart_button() {
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
        add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    }
    #386976
    Coulter

    Well, it works – but not with the CSS I cobbled together. With the current CSS, the after_single_product_summary appears WAY down below the Related Products.

    #386977
    Coulter

    It looks as if it’s inserting into the ‘after_single_product’ hook instead of the ‘after_single_product_summary’, but I don’t know why.

    #387106
    David
    Staff
    Customer Support

    The priority isn’t high enough – try changing it from 30 to 5, should get you closer to where you want it.

    #387148
    Tom
    Lead Developer
    Lead Developer

    Good idea, David – that should bring it up quite a bit higher.

    #387152
    Coulter

    Okay, that worked.

    #387155
    Tom
    Lead Developer
    Lead Developer

    Cool, as far as your CSS, you should replace:

    .woocommerce div.product .summary {
        transform: translateY(50%);
        position: absolute;
        left: 0px;
        bottom: 90%;
        width: 450px !important;
        z-index: 1;
    }

    With:

    @media (min-width: 769px) {
        .woocommerce div.product .summary {
            transform: translateY(50%);
            position: absolute;
            left: 0px;
            bottom: 90%;
            width: 100% !important;
            max-width: 450px;
            z-index: 1;
        }
    }

    That should make stuff more responsive.

    Let me know if you need help with any of the other styling 🙂

    #387160
    Coulter

    Thanks for all the help! The other big thing that’s bugging me is how the example site has the Social Buttons, Stock Availability, and Add To Cart all locked to the bottom of the browser. Notice how they move if you change the browser height or width – but they always stay within view unless you scroll. I feel like this is an essential component of this layout because otherwise the Add To Cart is hidden under the fold, and that’s bad. What kind of CSS can I use to get the same effect?

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