This topic has 35 replies, 2 voices, and was last updated 6 years, 1 months ago ago by Rose Tyler
Hi,
By default the product category title shows in a box inside the category image. How can I make the category title to show under the category image?
Here is how it looks now:
https://bb.lucianwebservice.com/product-category/bridles/
I searched the forum and docs but did not find how to do it.
Thank you — Lucian
Hello,
Please add this code in Theme Options > Styling > Custom css:
.products-grid .product-category .categories-mask {
bottom: -75px;
}
.products-grid .product-category {
margin-bottom: 60px;
}
Regards
Thank you, Rose! Works great!
https://bb.lucianwebservice.com/product-category/bridles/
One more quick question: where can I enter the email for “Email to a friend”? I filled out the email in General – Contact form, but this seems to not be used for “Email to a friend”.
Thanks!
Hello,
You’re welcome!
We’ve sent shortcodes.php and woo.php files to your registration email. You need to replace them in classico/framework folder via FTP to fix the problem with the email (General > Contact form).
Regards
Works perfect now! Thank you for the files!
I have a few more questions to finish the site launch.
How can I show the description tab on the right sidebar on the product page?
https://bb.lucianwebservice.com/product/english-raised-headstall/
Is there a shortcode or something? I found how to hide the tabs from under or next to images, but not sure how to show the tabs again in the right sidebar.
And where to change the product description and additional info font / color?
I tried this in the Global CSS settings but doesn’t change anything:
.product-information .short-description p {
color: #000000;
}
Thanks!
The idea is to have Options & Description info available above the fold there, without having to scroll down for more.
1) Now it is setup on 2 cols like here: https://prntscr.com/irveci , having the short description shown above the options. In this case you can see that options are not fully shown above the fold.
But I am interested to show it in 3 cols like here: https://prntscr.com/irvgyz
I need to show the short description or the TABS (accordion style) on the right sidebar.
2) Alternatively: Is there a way to remove “PRODUCT INFORMATION” above the options (like shown in the 2cols screenshot), to lift the options a bit.
3) The CSS mentioned above works for short description, but I need to change the color for the full product description. What is the css class for that?
Thanks again!
Hello,
You can change Single Product Page Layout in Theme Options > E-commerce > Single Product Page.
To remove the short description http://prntscr.com/irz92g can be used this code:
.product-information .short-description {
display: none;
}
3.
.tabs .tab-content, .tabs .tab-content a {
color: #000000;
}
Regards
Great! Thank you.
I still play around with the layout. I figured out how to remove the heading word PRODUCT INFORMATION using:
.product-information .title {
display: none;
}
1) How can I lift the price up a bit? (remove some of the space above it)
2) How can I manage the space under the product title and content? (less space)
See here: https://prntscr.com/is0q6e
You’re welcome!
1.
.single-product .product-information .price {
margin-top: 0px;
line-height: 1;
margin-bottom: 15px;
}
2.
.single-product .page-heading {
margin-bottom: 0px;
}
Regards
Great and thanks again, Rose! I need to learn more CSS 🙂
Just this for today!
1)I found where to deactivate the newsletter (Promo Popup) in the right side top bar area widget. How do I make the Search box to fit there? (the search button goes on the second line) See here https://prnt.sc/is1kcc
2) In the left side top bar area I put a hyperlinked phone number. How can I change the color for that to black?
I do not see the top bar on your site. Have you disabled it?
If you added the number via a text widget, this article will be useful for you https://www.w3schools.com/html/html_css.asp, for example <p style="color:blue;">This is a blue text</p>
Please activate the top bar so I can inspect the code via browser console and give you advice about the search, also you can provide temporary wp-admin access in Private Content.
Regards
1)Ok, I reactivated top bar. See also private content for login.
On the phone number, I wanted to change the color for the hyperlink (I use a href=”tel:…)
On the search, I like it how it shows on mobile: https://prntscr.com/is3fgv , I wonder if on desktop can show up like that, close to the cart icon.
(if that’s possible, I will remove the phone number from the top left)
2) Is it possible to move the price below the description on the product page?
A recap for my previous reply (credentials in the private content of the above post)
1) For the desktop search bar it’s ok as a search field & submit button, like here https://prnt.sc/is1kcc , it just need to fit in the header properly.
2) Is it possible to switch the price with the short description on the product page? (so the price shows above the options, and short description above price) like here: https://prnt.sc/isrh4i
3) The color of the phone URL link (in header) should be black.
And one more:
4) I have a question about gallery (zoom and placement) on the product page.
With the Classico included gallery it looks like this:
(probably because images are different heights)
https://prntscr.com/isrh80
and
https://prntscr.com/isrh8s
My customer wants the enlarged image to show to the right.
I use YITH WooCommerce Zoom Magnifier, which shows the gallery ok, pictures the same size, and has the option to show the magnified image to the right.
https://prntscr.com/isrh6z
Is there a way to do the same with the included Classico gallery?
(You can see the default gallery by deactivating YITH WooCommerce Zoom Magnifier)
I solved 2) changed the order of price and short description, by putting these lines in the child theme functions:
/** to change the position of price, based on woocommerce_single_product_summary hook **/
remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 21 );
I solved 3) the color of the phone URL (I created a sub-class phonelink in the languages-area class)
For 1) Search field — I noticed that Product search widget works fine in that position for desktop, but for tablet is a bit off. The regular Search widget is off for both desktop and tablet. How can we fix this?
https://prnt.sc/it25qw
________
Something else:
On the homepage and category page: some categories have a longer title (like Belts, Bracelts, Keyrings) and when looking on the tablet, the title pushes up on the category image and shows in that white box. Tablet view: https://prntscr.com/it1hu5
I tried to adjust that with:
/* move category title under the category image */
.products-grid .product-category .categories-mask {
bottom: -100px; //was -75px
}
.products-grid .product-category {
margin-bottom: 80px; //was 60px
}
but now the space between the other category images and their title increased.
https://prntscr.com/it1iop
How do I change it without having the white box showing over? Is it possible to just print the category title under its image, and completly remove that white box?
Hello,
Sorry for the delay due to the weekends.
Let’s solve your problems step by step because numerous questions produce numerous answers and I’m confused a little bit. Please write unsolved questions one by one with numbers.
Thanks in advance.
Regards
Hi Rose,
I figured out most things, I just need some fine tunning. I copied the credentials in the private content here.
1) Search field — I noticed that Product search widget works fine in the header (top right) for desktop, and for tablet it shows the submit button under the search, nice aligned (probably that’s how it’s setup on mobile).
Search products on desktop: https://prntscr.com/itwlm5
Search products on tablet: https://prnt.sc/it25qw
(these look OK)
But the regular Search widget is off for both desktop and tablet. How can we fix this?
Search widget on desktop: https://prntscr.com/itwi3o
Search widget on tablet: https://prntscr.com/itwjri
2)On the homepage and category page: some categories have a longer title (like Belts, Bracelts, Keyrings) and when looking on the tablet, the title pushes up on the category image and shows in that white box. Tablet view: https://prntscr.com/it1hu5
I tried to adjust that with:
/* move category title under the category image */
.products-grid .product-category .categories-mask {
bottom: -100px; //was -75px
}
.products-grid .product-category {
margin-bottom: 80px; //was 60px
}
It looks ok, just that the space between the category images and their title increased.
https://prntscr.com/it1iop
How do I change it without having the white box showing over? Is it possible to just print the category title under its image, and completly remove that white background box?
Thanks — Lucian
Hello,
1.
@media only screen and (max-width: 1290px) and (min-width: 992px){
.top-bar .widget_product_search .woocommerce-product-search input[type="search"] {
width: auto !important;
}
}
2. Please change the custom code to this:
.products-grid .product-category .categories-mask {
bottom: -75px;
}
.products-grid .product-category {
margin-bottom: 60px;
}
@media only screen and (max-width: 1250px){
.products-grid .product-category .categories-mask {
background-color: transparent;
bottom: -70px;
margin-left: 0;
margin-right: 0px;
}
.products-grid .product-category .categories-mask h4 {
font-size: 16px;
}
}
@media only screen and (max-width: 480px){
.products-grid .product-category .categories-mask h4 {
font-size: 12px;
}
.products-grid .product-category .categories-mask {
bottom: -65px;
}
}
Regards
Thank you, Rose! Both solutions work very nice on both desktop & tablet!
One small problem on the tablet: if you have something on the cart, the cart zone at the top right shows over the Search button like this:
https://prnt.sc/iu7qj4
In General -> Header Settings I enabled cart widget. I thought this is the cart showing next to the logo.
But as you can see there is a second cart at the top right, beside the Search box. (it expands)
Maybe we need to move the search a bit to the left to not get under the cart?
Or maybe is there a way to only show the cart beside the logo (as this one expands too)
It’s not a big deal, maybe I can leave it as it is. What do you suggest?
(I played around with showing/hiding the cart widget & search box in Header settings, but the search box is too large there)
You’re welcome.
Have you sorted out http://prntscr.com/iua9tk ?
Regards
No, you can see the issue only when you add at least one item in the cart.
I will let it as it is for now, it’s not a big issue.
You can give me a suggestion if you want. Just add something in the cart.
You must be logged in to reply to this topic.Log in/Sign up