This topic has 35 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler
Ok.
You can use this custom css code in Theme Options > Custom css:
.woocommerce-cart-tab {
display: none;
}
to remove the cart beside the search.
Regards
Thank you! It works perfectly.
You’re welcome!
Regards
A few more fine tunning:
1. How do I change the order of the categories on the homepage? This is the correct order I need to show: Bridles | Reins | Breast Collars | Bridle Accessories | Belts, Bracelets & Keyrings.
In homepage it is set to show in Menu Order, ASC, but doesn’t show properly. In WooCommerce -> Products -> Categories I ordered the categories by drag & drop.
Editing with WP Bakery builder shows this: https://prnt.sc/iwctcu (category order is Menu Order)
The code of homepage is this:
[vc_row full_width=”stretch_row_content_no_spaces” equal_height=”yes”][vc_column][product_categories orderby="menu_order" order="ASC" columns="4" ids="344, 79, 361, 80, 348" hide_empty="4"][/vc_column][/vc_row]
The category order works ok in https://bb.lucianwebservice.com/shop/ but not on the homepage: https://bb.lucianwebservice.com/ I guess they use different shortcodes.
What do I need to make it right?
2. How can I add a button (or a link) on the right of options OR under the gallery? See here: https://prntscr.com/iwdjq2
I need to do this only for some single product pages and each link will be different, depending on the product. Perhaps if I can put this code in a custom field or something.
3. I changed the newsletter icon with a truck icon, at the left of top search. How do I change the icon color to red?
4. What is the class for the menu navigation? I want to play with the horizontal spacing between main menu items, line height etc.
Thanks — Lucian
Hello,
1. You use default WC element. Please try to use [8theme] Product categories element.
2. Make sure this is enabled http://prntscr.com/iwhsoy then
http://prntscr.com/iwhsfl
<?php echo get_post_meta(get_the_ID(), 'custom_link', true); ?>
https://prnt.sc/iwhyde
classico/woocommerce/single-product/product-thumbnails.php (do changes via child theme).
3. http://prntscr.com/iwg96n
4. To find out a needed class, you may simply inspect the page using devtools in chrome browser https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
To access the DevTools, open a web page or web app in Google Chrome. Either:
-Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.
Regards
Thank you!
On 1.I was able to insert the [8Theme] Product Category and set it to Parent 0 to show only the top categories.
But now the category title show as when I started this ticket, in white boxes, inside the category image. See here: https://prnt.sc/iwqs6m
I have this code from you in the 8Theme Styling Global CSS, but does not work anymore. What do I need to add to it? I tried adding category-grid, but no luck.
/* category title under the category image */
.category-grid .products-grid .product-category .categories-mask {
bottom: -75px;
}
.category-grid .products-grid .product-category {
margin-bottom: 60px;
}
@media only screen and (max-width: 1250px){
.category-grid .products-grid .product-category .categories-mask {
background-color: transparent;
bottom: -70px;
margin-left: 0;
margin-right: 0px;
}
.category-grid .products-grid .product-category .categories-mask h4 {
font-size: 16px;
}
}
@media only screen and (max-width: 480px){
.category-grid .products-grid .product-category .categories-mask h4 {
font-size: 12px;
}
.category-grid .products-grid .product-category .categories-mask {
bottom: -65px;
}
}
On 2. I was able to create a custom field and show it as a button “Click Here for Matching Reins”. I just need to place the button to the right of variations, can you please send me the css code?
https://bb.lucianwebservice.com/product/english-raised-headstall/
I use a class named “matched_reins”.
This article shown me how to print in a specific position, I just need to place it to the right of variations, as there is more room there.
https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/#
* * *
Thank you for the help info sent. I try to use Inspect Element, but I am not always sure how to get to the right class for an element. I will search for some video tutorials.
1. Please change the code to:
.product-category .categories-mask {
bottom: -75px;
}
.product-category {
margin-bottom: 60px;
}
@media only screen and (max-width: 1250px){
.product-category .categories-mask {
background-color: transparent;
bottom: -70px;
margin-left: 0;
margin-right: 0px;
}
.product-category .categories-mask h4 {
font-size: 16px;
}
}
@media only screen and (max-width: 480px){
.product-category .categories-mask h4 {
font-size: 12px;
}
.product-category .categories-mask {
bottom: -65px;
}
}
2. Please try to use this code:
.matching_reins {
position: absolute;
left: 50%;
top: 50%;
}
Regards
Thank you very much! Both work perfectly!
https://bb.lucianwebservice.com/
https://bb.lucianwebservice.com/product/english-raised-headstall/
I was watching css tutorials with Inspect 🙂
You’re welcome 🙂
Regards
1) Just one question about gallery (zoom and placement) on the product page.
Is it possible using your included gallery to magnify image to the right? (above the description area)
With the Classico included gallery there are some problems with the image placements:
(probably because images are different heights)
https://prntscr.com/isrh80
and
https://prntscr.com/isrh8s
For now 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. But sometimes the image is stuck on magnify, maybe there is a conflict with your gallery or something.
https://prntscr.com/isrh6z
Is there a way to do the same with the included Classico gallery (magnify to the right and gallery shown properly? Or what do you recommend?
My customer wants the magnified picture to show to the right.
(You can see the default gallery by deactivating YITH WooCommerce Zoom Magnifier)
Thanks!
Hello,
There are no conflicts with our theme, so I would recommend you to check how this works with default WC theme – Storefront, then contact the plugin author about the problem.
Regards
Thank you!
For one category (Belts, Bracelets & Keyrings) I added a custom tab “Measurement”.
https://bb.lucianwebservice.com/product/blue-ocean-croc-ladies-belt/
When I do that, the Reviews tab dissapears. I am trying to add the Reviews tab back, I was able to add the tab title. Is there a shortcode or php code I can use to include the reviews form in this tab content?
Thanks!
Hello,
Please read this article https://docs.woocommerce.com/document/editing-product-data-tabs/
Regards
Thank you. I read and a tried the article code. I thought your theme has a custom code for reviews tab.
Does it?
Like a function to add the review form in tge Review tab?
Hello,
We did not rewrite functionality of Review tab in our theme. You need to check how this works with default WC theme – Storefront, so please activate the default theme and check. Likely it would be better to contact woocommerce support, all WC snippets work fine with our theme.
Regards
You must be logged in to reply to this topic.Log in/Sign up