- This topic has 6 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
Hi,
I want some help with styling a product on my site. I’m using WooCommerce, I only have one product (so far) but when I add it to the custom page it doesn’t look very good, as evident in the attached screenshot. The margin seems to be way off, with a big white space created in the middle. I have 2 columns selected in Theme options > WooCommerce options but it’s just not looking right. Any help would be much appreciated!
Thanks.
Hi there,
After doing some research, I’m wondering if it would be better to change the style of the Product page, as per the attached screenshots? What I’d like to achieve is 3 columns – the 1st column will hold the small image and description / text. The 2nd and 3rd column will contain the booking calendar. You can see a rough mockup attached. Can you please let me know how to achieve this?
Thanks.
Hi @MonologueHQ,
I hope you are well today and thank you for your questions.
I want some help with styling a product on my site. I’m using WooCommerce, I only have one product (so far) but when I add it to the custom page it doesn’t look very good, as evident in the attached screenshot. The margin seems to be way off, with a big white space created in the middle
You can achieve it 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
.page-id-1460 .woocommerce ul.products li.product { width: 100%; }After doing some research, I’m wondering if it would be better to change the style of the Product page, as per the attached screenshots? What I’d like to achieve is 3 columns – the 1st column will hold the small image and description / text. The 2nd and 3rd column will contain the booking calendar. You can see a rough mockup attached. Can you please let me know how to achieve this?
To achieve this, 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 teamHi,
Thank you for the code – it worked well. Now that the columns are a good size, can the proposed layout (as per attachment) be achieved with some custom code?
Secondly – please show me how to remove the title bar at the top (in grey). I don’t use it on any other pages so I don’t want it here.
Thanks.
Thank you for the code – it worked well. Now that the columns are a good size, can the proposed layout (as per attachment) be achieved with some custom code?
As said above, to achieve this you have to develop custom PHP code which is beyond the scope of support that we provide here.
Secondly – please show me how to remove the title bar at the top (in grey). I don’t use it on any other pages so I don’t want it here.
You can remove it from the theme settings as shown in the attached screenshot.
Thanks, but the option is already set to ‘Off’. See attached.
Then you can hide it using below custom CSS code.
body.woocommerce .sh-titlebar { display: none; }
