- This topic has 47 replies, 3 voices, and was last updated 5 years, 5 months ago by Ivan Cazorla.
-
AuthorPosts
-
June 5, 2018 at 8:27 am #592426Ivan Cazorla
Good afternoon!
Is there any possibility to make a div that is inside the site-container, make it full screen so that it can have a background color full screen but the content is still inside the container?
thanks,
IvanJune 5, 2018 at 8:29 am #592433DavidStaffCustomer SupportHi there,
What’s the difference between this and setting the Body background color?
Having a little trouble picturing this so any image or example would be of help.June 5, 2018 at 8:33 am #592435Ivan CazorlaHi again,
Well I’d like to make different colored sections as this example on the image, so I cannot use always the same body background color.
Website example link here: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html
thanks,
IvanJune 5, 2018 at 8:34 am #592437Ivan CazorlaI wish I could use GP hooks but as for woocommerce product tabs I think that’s not possible, isn’t it?
thanks,
IvanJune 5, 2018 at 8:54 am #592449DavidStaffCustomer SupportIts not possible with GP Hooks without rebuilding most of the page. The Woocommece hooks are also within the post content so will be limited by the container width.
It would require us to make the entire page full width and then add back the containment where required using margins. Is it just the tabs section you would need this for?June 5, 2018 at 8:55 am #592451Ivan CazorlaAlright, I understand. Yes I only need this for the tabs sections. Yeah I thought doing the entire page full width and then add back the containers.
thanks,
ivanJune 5, 2018 at 9:01 am #592456DavidStaffCustomer SupportFYI here are the Woo Hooks.
https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
Unfortuntely there is not a hook below the tabs section until you get to the end of the product. But you could use the before single product summary and after single product summary to wrap the gallery and description to make that a bit more manageable when re-assinging the containment:
June 5, 2018 at 9:05 am #592461Ivan Cazorlathank you for your help, I’ll see what I can do.
thanks!
ivanJune 5, 2018 at 9:06 am #592462DavidStaffCustomer SupportYou’re welcome.
June 5, 2018 at 9:13 am #592464Ivan CazorlaWhat I am really trying to achieve is to make something similar as this: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html
I’ve managed to display the product tabs in sequence and found a plugin called Woocommerce Custom Tabs that lets you add multiple tabs and using the GeneratePress editor I can set that own that to be full screen or contained.
Seems that you need the buy the pro version of the plugin to let you really see the tabs you’ve created in the product page. So lame….
cheers,
IvanJune 5, 2018 at 3:44 pm #592706DavidStaffCustomer SupportIf you can share a link then i’ll have a look to see if we can get it closer to the example, or whether another approach is necessary.
June 5, 2018 at 11:57 pm #592844Ivan CazorlaHi, this is one of the websites I would like to make that happen: https://www.avancesliberty.com/tienda-cocina-estela/
Similar what this website does: https://www.campz.es/columbia-whitetop-chaqueta-azul-704222.html
thanks,
ivanJune 6, 2018 at 1:47 am #592896DavidStaffCustomer SupportLet’s give this a shot:
PHP Snippet to wrap gallery and summary
add_action( 'woocommerce_before_single_product_summary', 'awp_before_woo_summary', 5 ); function awp_before_woo_summary() { echo '<div class="awp-woo-wrap grid-container">'; } add_action( 'woocommerce_share', 'awp_after_woo_summary', 10 ); function awp_after_woo_summary() { echo '</div>'; }
And CSS:
@media (min-width: 768px) { .single-product .site { max-width: 100% !important; } .single-product .woocommerce-breadcrumb, .single-product .related.products { max-width: 1100px !important; margin-left: auto; margin-right: auto; } }
June 6, 2018 at 1:59 am #592898Ivan Cazorlahi,
now I have everything wrapped and in full-screen mode.
thanks,
ivanJune 6, 2018 at 2:04 am #592902Ivan CazorlaHow can I just make for example individual sections with different background colors?
Like setting the description section with a grey background color?
thanks,
ivan -
AuthorPosts
- You must be logged in to reply to this topic.