Docs

[RaynardKyleGuzman]

Hi all!

There are several changes I want to implement on my site that I have not been able to accomplish.

1. Remove the price of the products from being shown in the catalog page. I want it to be visible only after the product is clicked or in the product page.

2. Remove the the red box that says “select options” whenever you hover on the image of the product.

3. The navbar to look this way, left side: menu (though I haven’t assigned a menu yet) center: logo and on the right side a search bar.

4. On the product page, the “add to cart” box to have a different background color (shade of grey).

5. And lastly, when the site is accessed on mobile on the catalog page, I want it to show the products in 2 columns.

Here is the url of my site.
http://yunoclothing.com/

This is my first website and am learning most of it through experience. Any help would be much appreciated. Thanks!

[Joao]

Hi There,

Please add the following codes to Appereance Customizer Custom CSS

1-

.archive.woocommerce li.product .entry-header .price>.amount, .woocommerce li.product .entry-header .price>ins>.amount {
    display: none;
}

2-

 .archive.woocommerce li.product:hover .entry-header .button {
      display: none;
}

3-

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. We have our header builder on the pipeline it should be released whitin 30 days (altough this is not an official statement) You might be able to achieve this once the new header builder is released.
Thanks for understanding.

4- Go to Appereance > Customizer > Buttons and select the colors of your website buttons.

5-

@media (max-width: 480px){

.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
   
    width: 48%;
}}

Hope it helps

Joao

[RaynardKyleGuzman]

Everything worked out great. Thanks a lot! Another thing for the product images in the catalog page, I don’t want them to appear in separate boxes. This site is an example, https://mn-la.com/
Again, thanks!

[RaynardKyleGuzman]

Another thing, I placed a search function as a widget in my header. Since its the only widget, could I change the icon to access the header from a plus icon to a search icon (magnifying glass). Thanks!

[Lely]

Hi There,

You’re always welcome!
Add this CSS to remove the box holder:

.woocommerce li.product {
    background-color: transparent;
    box-shadow: none;
}
.woocommerce .entry-wrap {
     background-color: transparent;
    box-shadow: none !important;
    border: none !important;
}

To change plug icon, please use this:

.x-btn-widgetbar i:before {
    content: '\f002';
}

Hope this helps.

[RaynardKyleGuzman]

A lot of thanks again! Need to do other customization. please help again. Again, my site url is yunoclothing.com

1. I want the header to look similar to reiss.com
*Change the navbar background color to a dark shade of grey (similar to reiss.com)
*The logo placed at the center of the navbar, and the font family to be Helvetica
*The menu bar placed at the right
*The search icon to be white. Instead of being placed at the top right, at level with the logo and be slightly bigger. (similar again to the search icon of reiss.com)

2.The footer to have the same background color with the navbar, and the social site icon to be white. I believe this can be done by simply changing from light to dark in the integrity section. However I don’t want to change the other color schemes except the navbar and the footer.

3. Change the color of the home icon (visible once you are in the product page and would want to return to the catalog page) to a darker shade of grey.

4. In the catalog page, the product name to be hidden. Instead, the category assigned to the products to be the only one visible. A little similar to mn-la.com however, only the category is visible. The product name to only be visible once you are transferred to the product page.

5. On the product page, below the product image, I want to remove the additional information tab and reviews tab. The product description tab would be the only one visible.

Thanks again!

[RaynardKyleGuzman]

*Correction, the menu bar to be placed at the left side of the navbar.

[Christopher]

Hi there,

#1 Please adjust menu options like Navbar top height and Navbar Top Logo alignmen, check this link : https://community.theme.co/kb/customizer-header/

Add following code in customizer:

.x-navbar {
    background-color: #4C453B;
}

To add logo between menu items, follow this thread : https://theme.co/x/member/forums/topic/making-logo-be-in-the-middle-of-the-nav-bar/#post-161784

#2 Add this code as well :

footer.x-colophon.bottom {
    background-color: #4C453B;
}
footer.x-colophon.bottom .x-social-global a {
    color: #fff;
}

#3 I don’t find home icon, please provide us with screen shot.

#4 Provide us with URL of page in question.

#5 Manage tabs under Customize -> Woocommerce.

Hope it helps.

[RaynardKyleGuzman]

Was able to accomplish #2, #5. Thanks!

For #1, Was also able to successfully change the background color. However i was not able to follow the instructions on the link you provided. Though we do seem to want to implement similar changes. I already got lost in the first step “Step 1: Add a 4th menu item and give it a class of logo-menu-item and your website’s URL (see: http://prntscr.com/5f7zba).” can you provide a more specific instruction?

#2 I have attached an image where the home icon is. The color of the icon is too light to be seen.

#3 the catalog page is yunoclothing.com. Currently it displays the product names, (i.e. bomber jackets, cullottes, etc.) I want the product names to not be visible on that page and only appear once you click the product image. And instead I want the product categories to appear instead. For example above the product images of the “bomber jacket”, “Outdoor” should be displayed ( since this is the category I’ve placed the product in). I want it to look similar to mn-la.com in this case the “box tees” are the categories. Then the next products are separated by the “oversized tees” category.

#4 adjust the size of the social icons to make it slightly bigger

#5 on the product page (i.e. http://yunoclothing.com/product/bomber-jacket/ ) Remove the box in the product description, change the font of the text to helvetica and remove the spaces between paragraphs.

Thanks a lot!

[Christopher]

Hi there,

#1 If CSS classes field is not available, please check the box to enable this option under Screen options panel located on top right.

#2,4 Please add following code:

.x-breadcrumb-wrap a, .x-breadcrumbs .delimiter {
    color: #000;
}
.x-social-global a {
    font-size: 25px !important;
}
.x-tab-content {
    box-shadow: none;
    border: none;
    background-color: transparent;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;

}
.x-tab-content p {
    margin-bottom: 0;
}

#3 Editing shop page could be possible with custom development which is outside the scope of our support. This is achievable only with woocommerce shortcodes, please see :https://docs.woocommerce.com/document/woocommerce-shortcodes/

Hope it helps.

[RaynardKyleGuzman]

The previous given codes were very helpful, thanks! However, when I customized my navbar using the steps given above, it looked ok on desktop, however when I tried to access it through mobile it did not look the way it should have. Since I believe majority of the people buying from my site will access it through their mobiles, its very important to me how the site looks on mobile. I’ve provided an image of how the navbar should look like in mobile devices. I hope this is possible.

2. on the product page, how to remove the “description”? I’ve also provided an image.

3. For displaying the categories on the shop page, (yunoclothing.com) I was able to find a plugin that helped me do it. woocommerce nested category layout. However, Once I activated the plugin, it did indeed display the product category however it changed the size of the displayed product images. Now it displays 1 image per row both on desktop and on mobile. I want to return it to my previous setting, 3 images displayed per row on desktop and 2 images on mobile.

4. To also remove the product name in the shop page. (yunoclothing.com) The product name to only be visible once in the product page.

Thank you so much again for the great customer support!

[Christopher]

Hi there,

Please add following code :

li.x-nav-tabs-item.description_tab.active {
    display: none;
}
.single-product ul.x-nav.x-nav-tabs.one-up.top {
    border: none;
    box-shadow: none;
}
@media (min-width:767px){
h2.wc-nested-category-layout-category-title {
    float: left;
    width: 100%;
}
ul.subcategory-products.products li {
    width: 30%;
    float: left;
    margin-bottom: 0;
}
a.x-brand.img {
    display: none;
}

}
@media (max-width:767px){
h2.wc-nested-category-layout-category-title {
    float: left;
    width: 100%;
}
ul.subcategory-products.products li {
    width: 45%;
    float: left;
    margin-bottom: 0;
}
a.x-brand.img {
    display:block;
    float: none;
    text-align: center;
}
a.x-btn-navbar {
    float: left !IMPORTANT;
}
}

.archive.woocommerce header.entry-header {
    display: none;
}
.woocommerce li.product .entry-featured {
    border-bottom: navajowhite;
    box-shadow: none;
}

Copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
            <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <?php x_get_view( 'global', '_brand' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Hope it helps.

[RaynardKyleGuzman]

Hi! Thanks for the quick response. I did the steps you suggested, however, there were still some problems both in the desktop and the mobile view. For the desktop view, the logo of Yuno was missing. For the mobile view, there were blank spaces in between the products as if there was an invisible product image in between. ( I’ve provided an image) The position of the menu was spot on, however can it be edited in a way that every time I click the menu the logo is not dragged down with it? I’ve provided another image. Just a little more, I’ve almost already got the look of the site I want. Thanks again!

[Christopher]

Hi,

Please remove this code :

a.x-brand.img {
    display: none;
}

Add this:

@media (max-width:767px){
.woocommerce li.product.first {
    clear: none;
}
}

Please remove _navbar.php file for now and check how menu and log get displayed without modifying php.

Hope it helps.

[RaynardKyleGuzman]

I just did. The desktop view is now working. The logo is displayed. However, on mobile the blank spaces between the products are still present. And the menu list is below the logo, is it possible to have it inline with the logo? thanks again!

[Author]

Posts