- This topic has 22 replies, 4 voices, and was last updated 6 years, 2 months ago by
David.
-
AuthorPosts
-
September 14, 2017 at 7:28 pm #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!
September 14, 2017 at 11:18 pm #385740Tom
Lead DeveloperLead DeveloperInteresting layout – any chance you can link me to what you have so far?
September 15, 2017 at 12:19 pm #386144Coulter
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?
September 15, 2017 at 2:05 pm #386187David
StaffCustomer SupportIf 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.September 15, 2017 at 7:59 pm #386303Tom
Lead DeveloperLead DeveloperIt 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 π
September 16, 2017 at 1:08 pm #386586Coulter
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.
September 16, 2017 at 5:46 pm #386648David
StaffCustomer SupportThat’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.
September 17, 2017 at 10:13 am #386969Tom
Lead DeveloperLead DeveloperI 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 ); }
September 17, 2017 at 10:25 am #386976Coulter
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.
September 17, 2017 at 10:34 am #386977Coulter
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.
September 17, 2017 at 5:41 pm #387106David
StaffCustomer SupportThe priority isn’t high enough – try changing it from 30 to 5, should get you closer to where you want it.
September 17, 2017 at 8:02 pm #387148Tom
Lead DeveloperLead DeveloperGood idea, David – that should bring it up quite a bit higher.
September 17, 2017 at 8:07 pm #387152Coulter
Okay, that worked.
September 17, 2017 at 8:20 pm #387155Tom
Lead DeveloperLead DeveloperCool, 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 π
September 17, 2017 at 8:32 pm #387160Coulter
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?
-
AuthorPosts
- You must be logged in to reply to this topic.