- This topic has 22 replies, 2 voices, and was last updated 4 years, 2 months ago by
.
https://cbdfactum.com/de/product/cbd-factum-patches
Is there a way to center the description instead of the current right alignment?
Hi @CBDFactum,
I hope you are well today and thank you for your question.
You can display two-column content in one column by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.single-product .sh-woo-layout-right.col-md-6 { width: 100%; clear: both; float: none; padding: 0; }To display only description center-aligned, you have to develop custom code in the child theme of Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound teamYes, this is now the first step in the right direction.
I am referring to this page: https://cbdfactum.com/product/cbd-factum-patches/
I would have now these questions which came up:
- Is there a way we float the content left of the product image? Usually this shouldn’t be a big problem.
- If 1) is not possible, can we at least center the image.
- Check the width of this page: https://cbdfactum.com/about-us/ you see, the width is not that wide as in the product page. How can I set the width for the page?
- I understand that support for modifying the source code is out of the scope. But, at least, can you name me the PHP file which contains the logic for the product details? I would copy it in the Child theme and play a bit around if I need further adaptations.
Thank you!
Is there a way we float the content left of the product image? Usually this shouldn’t be a big problem.
If 1) is not possible, can we at least center the image.
You can center align the image using below CSS code.
.single-product #page-container .sh-woo-layout-left.col-md-6 { max-width: 500px; } .single-product #page-container .sh-woo-layout-left.col-md-6, .single-product #page-container .sh-woo-layout-image > div, .single-product #page-container .sh-woo-layout-image img { width: auto !important; margin: 0 auto; float: none; }Check the width of this page: https://cbdfactum.com/about-us/ you see, the width is not that wide as in the product page. How can I set the width for the page?
Just reduce the width 100% in the above initially shared CSS code to reduce its width.
I understand that support for modifying the source code is out of the scope. But, at least, can you name me the PHP file which contains the logic for the product details? I would copy it in the Child theme and play a bit around if I need further adaptations.
It’s woocommerce plugin file which is displaying the product page so please contact the woocommerce plugin support to know which file to copy in the child theme.
Thx, this centered the image.
I see, I should be more specific and then I save your time.
Just reduce the width 100% in the above initially shared CSS code to reduce its width.
This is what I did but unfortunately the whole content keeps left aligned. Therefore the link to https://cbdfactum.com/about-us/ where you see the smaller width is expanded/counted from the middle and then the content is centered.
Sorry I was not accurate enough.
Is there a way I use for the product pages WPBakery Page Builder? With this plugin it would be then very easy and I could do it on my own.
Using
padding-left: 17%;
Moves the content closer to the center. This is solved. On mobile phones it looks strange, so the final CSS is this:
@media screen and (min-width: 1200px){ .single-product .sh-woo-layout-right.col-md-6 { width: 75%; clear: both; float: none; padding-left: 17%; } }https://cbdfactum.com/product/cbd-factum-patches/
There would be just the only question regarding WPBakery Page Builder.
Awesome great to see you got that solved.
Please advise if you have more questions.
Have a fantastic day!
There would be just the only question regarding WPBakery Page Builder.
Could you please post that question again?
Is there a way I use for the product pages WPBakery Page Builder? With this plugin it would be then very easy and I could do it on my own.
Or is this a WooCommerce matter?
Is there a way I use for the product pages WPBakery Page Builder? With this plugin it would be then very easy and I could do it on my own.
You can enable it in the WPbakery plugin settings as shown in the attached screenshot.
Or is this a WooCommerce matter?
Yes
Yes, this enabled WPBakery Page Builder but using it results in a horrible layout. May be it is my fault. However, I have to investigate it deeper.
Thx, you can close this thread.
Ok
Hi, I have to come back to this thread.
I am not satisfied with the above solution where the image is centered and the whole description is below.
I edited the HTML code directly in the browser with the code inspector and I see it is very easy to change it that the upper part remains like it is [image left, “Short description” and “Add to Cart” right] and the product description then centered below – see the attachments.
My question: Please, advice [path] which PHP file I have to copy to my child theme so I can move the one DIV so it appears in the nice centered way.
I know exactly what to do but I don’t know in which PHP file the code is.
Thank you
OK guys, I have found the script.
- Copy wp-content/themes/jevelin/woocommerce/content-single-product.php into the child theme folder.
- Edit the file as in the below code. Then the tabs “Description”, “Additional Information” and “Reviews” appear nicely over the whole width and are not right aligned while 2/3 of the screen remains empty.
I think this is a design problem. When I check the demos in the Jevelin shop I understand how it happened: The demo contains in the “Description” and “Additional Information” only 1-2 lines so this design problem doesn’t appear.
In my case, where I have sometimes in the product description several hundreds of lines, it is really a pain to see the right aligned text.
May be you reconsider this. Attached you see how horrible it looks when there is a very long text.
And check now the fixed layout and I think you will agree this version looks more natural and better: https://cbdfactum.com/product/cbd-factum-patches/
The change in content-single-product.php:
….
<?php
/**
* Hook: woocommerce_after_single_product_summary.
*
* @hooked woocommerce_output_product_data_tabs – 10
* @hooked woocommerce_upsell_display – 15
* @hooked woocommerce_output_related_products – 20
*/
/* ++++++ comment the following line++++++ */
// do_action( ‘woocommerce_after_single_product_summary’ );
?></div>
<?php /* +++++ ADD THE FOLLOWING LINE ++++++ */
do_action( ‘woocommerce_after_single_product_summary’ );
?><?php do_action( ‘woocommerce_after_single_product’ ); ?>
You can close this thread.
I think this is a design problem. When I check the demos in the Jevelin shop I understand how it happened: The demo contains in the “Description” and “Additional Information” only 1-2 lines so this design problem doesn’t appear.
In my case, where I have sometimes in the product description several hundreds of lines, it is really a pain to see the right aligned text.
Sure, we will consider this to be changed in the future version of the theme.
Hi, what about this? Will this be changed as I showed that with very long description the right alignment isn’t really that optimal?
No, it is not changed yet but will update you here when it will be changed.
Solution for this topic
We have added the option in the theme settings as shown in the attached screenshots in the below latest version of theme so please update the theme as described here https://support.shufflehound.com/updating-theme/
Perfect guys! Thank you very much!
Allow me few days to check it out. I will give you for sure a feedback! Looking forward. Another PHP script which I do NOT have to maintain anymore.
