[Resolved] How to change the layout?

[Paul]

hi, how are you?

please kindly check the URL link about my issue below:

https://prnt.sc/vzdrxo

1- i do not want to show the price, that is to say the number 1
2- i do not want to show the content of the number 3
3- i want to move content of the number 2 to the position of the number 4

Also, i attached my the product link in the private information and please check it

looking forward to your reply
thanks in advance
regards

[Leo]

Hi there,

This question is sort of out of the scope of our support forum here as the theme itself doesn’t decide what displays in WooCommerce single product page as that’s all handled by WooCommerce itself.

The CSS below should help you to get started:

1 & 2 Try this CSS:

.woocommerce div.product p.price, .woocommerce-variation-add-to-cart {
    display: none;
}

3. Try this CSS:

.single-product .entry-summary {
    display: flex;
    flex-direction: column;
}
.woocommerce-product-details__short-description {
    order: 2;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Hello Leo,

Yes, I know that this is out of the scope of our support.

Thanks much for your help and they are Ok with my questions. And I’m sorry that i m not good at the css code.

Again, can you help me again with the last one?

1- how to adjust the space between a, b, and c? https://prnt.sc/vzf0lw
the space of the number 1 is small and the space of the number 2 is two big?
if section b moves down a little and it looks nice.

2- how to delete the tab of ” additional information” by CSS code?

Thanks again for your help
regards

[Leo]

Try this CSS:

.woocommerce div.product form.cart {
    margin-bottom: 0em;
    margin-top: 1em;
}
.woocommerce-tabs li#tab-title-additional_information {
    display: none !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hi Leo,

Realllllllly thanks toooo much for your help and kindness. Added that code and everything look so beautiful and nice.

Very much appreciating the excellent service from Generatepress.

Would you like to advise where I CAN check or learn some code or documents helps about woocommerce? If possible, please show me the websites or URL link for that.

Thanks much again.

[Paul]

hi, leo

now I am using Smart Slider Pro 3 for my homepage.

1- https://prnt.sc/vzkckd –
if I change top padding from 50 to 0, you will find this issue （https://prnt.sc/vzk1ue）for BreadCrumbs in the product page. But space 1 (https://prnt.sc/vzk0rn) of the homepage will disappear.

if i change top padding from 0 to 50, BreadCrumbs in the product page is https://prnt.sc/vzk91n, but space 1 (https://prnt.sc/vzk0rn) of the homepage will come back. because it is a long distance from the background color of the body and looks not good

so, how to adjust them to satisfy the space from the homepage and BreadCrumbs?

2- If I move the smart slider up with a height of number 2 (https://prnt.sc/vzk0rn), how and where do I adjust the settings?

Looking forward to your reply and thanks in advance.
Regards

[David]

Hi there,

instead of adding your slider to the Page content.
Create a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add your slider shortcode to the hook content.
Select Hook: generate_after_header
Check: Execute Shortcodes
Set your Display Rules for the page(s) you want it displayed on. For your home page the Location is: Front Page

This will place the slider immediately below your site header which is outside of the padding main container.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hello david,

thanks so much for your help and very very useful for this issue.

I’m sorry that there is a new issue and pls check this screenshot https://prnt.sc/vzr25b

how to move this part up to the line of white background?

Thanks in advance
regards

[David]

Ok – the best thing to do when you want to have a page that has full width content is to set the Content Container to Full Width in the page editor:

https://docs.generatepress.com/article/content-container/

Install the GenerateBlocks plugin:

https://wordpress.org/plugins/generateblocks/

Now all of your page content will be full width without padding. You can add your Slider back to the page as the first block and remove the hooked slider.

Use the Container Block that comes with GenerateBlocks to create each section you require. You can set its inner container width and padding for each section.

You may also want to replace the core Columns Block with the GB Grid Block as this has full responsive controls.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hi david
thanks for your fast response and kindness.

i will try the method you told me above.

now we can not create the Element or add extra CSS code for adjusting the space of the slider?

regards
paul

[David]

It is possible to fix a bunch of things with CSS but that generally can spiral into one fix requiring another, and as you’re using Full Width content in the page it is best to go down the route i suggested, it will save a lot of headaches over time.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hello david,

how are you?

i already installed the GenerateBlocks plugin and Lightweight Grid Columns plugin

1- If using Hook Element you told me in the first time, the final screenshot is https://prnt.sc/w1m8jq

2- If using GenerateBlocks plugin you to me in the second time,

First, installed this plugin, then block the Hook element of the first banner from smart slider pro 3,

I will go back to the page of HOME to add one Container, copy the shortcode of the first banner from smart slider pro 3 in the Container (https://prnt.sc/w1mcdx)

After i saved the changes, then the screenshot of the homepage is https://prnt.sc/w1mdag

I dont want the space 1, 2, 3

I want to keep this https://prnt.sc/w1lvmo

Finally, i dont want have extra spaces and also i need this responsive Product Carousel from Smartslider3. we already bought this service and want to use them directly.

One more thing, Can i make this responsive Product Carousel with the GenerateBlocks plugin and Lightweight Grid Columns plugin ??

[David]

The simplest solution is just to build your page with the GenerateBlocks plugin.
But first you need to set the Content Container to Full Width – see here:

https://docs.generatepress.com/article/content-container/

This will remove all of the Themes paddings and margins and make every element fill the width of the page.

You can now add your Slider Block – this will have no gap above it or content padding.
Below the Slider add a Container Block, within the Container block add your other content.
Add a new Container Block for each ‘section’ you want to create.

This method allows you to have Full Width and Contained content.

No the GenerateBlocks plugin doesn’t have a carousel/slider option at this time.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

hello david,

i will check them carefully and thanks for all helps and your time.

take care and best regards

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts