Customizing Woocommerce shop

[perisoylu]

Hi there:

I am currently trying to customize my woocommerce shop and have a couple of questions. I really would appreciate your help with these issues:

Shopping cart icon and navbar:

• how can I align the shopping cart icon with my navbar?
• is there a way that I can with the search icon around with the shopping cart icon and make the search icon appear last on the right. Can I increase the margin on the right (between last element of navbar (search tool) and right side

Shop pages in general:

• Drop down menusl: Can I customize the design in any way? I would prefer another color, no gradient but solid colouring?
• I tried to add a background image to the shop however it did not work. Any idea what I have overlooked?

Shop archive:

• items are not aligned: Is there a way to force a certain size?
• part of the font is not aligned in the center. Can I center align all of the text?

Category archive:

• can I add a top margin so that the text is not on top of the navbar?

Single products:

• change padding of site, currently the text box is quite narrow and takes up a lot of space vertically.

Thanks so much for your help!
Best!

[ruenel]

Hello @perisoylu,

Thanks for writing in!

1.) The Shop icons

• To align the shopping cart icon in your navbar, please go to X > Theme options > WooCommerce and set the “Cart Alignment” to at least 35 pixels.

• To swap the icons, please add the following lines in your child theme’s functions.php file

remove_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item' );
remove_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item' );

add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9998, 2 );
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9999, 2 );

• To increase the margin right, please update your css code:

.x-container.width {
    width: 100%;
    !important: ;
}

This must be change to:

.x-container.width {
    width: 100% !important: ;
}

.x-navbar .x-container.width {
   width: 98% !important;
   margin-left: 0;
}

2.) Shop Page:

• To tweak the colors of the shop dropdown menu, please go to X > Theme Options > WooCommerce > Navbar Menu

• To change the background color of your shop page, you can use this css code:

.archive.woocommerce {
    background-color: red;
}

Do not forget to change the color.

3.) Shop Archive:

• The items were not align because they do not have the same title lengths and some items does not have the shipping and delivery time information. You must decide which to display in each items and so that a minimum height can be set to have a uniform item boxes.

• The text were not because of how the 3rd party plugin is styling the output. To resolve this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.product p.wc-gzd-additional-info {
    padding-left: 15px;
    margin: auto 10% 10px;
    padding-right: 15px;
    line-height: 0.95em;
}

4.) Category archive:

• To change the top margin of your category archive page, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.archive .x-header-landmark {
    margin-top: 0 !important;
    padding-top: 10%;
}

5.) Singe Products page:

• This issue happened because you added this css code:

.entry-wrap {
    margin: 0 10% 0 10%;
    margin-bottom: 1em 1em 1em 2em;
    font-size: 77%;
}

If you intend to apply this code in your single blog post, please have it updated and use this instead:

.single-post .entry-wrap {
    margin: 0 10% 0 10%;
    margin-bottom: 1em 1em 1em 2em;
    font-size: 77%;
}

We would loved to know if this has work for you. Thank you.

[perisoylu]

@RueNel Thank you for your help!

I have tried to incorporate most of your suggestions, however, some issues do still persist:

1. Alignment of shopping cart “card alignment” does not work, there seems to be something in the background that blocks this function
2. swapping icons (cart and search tool): I have included the php in the child functions.php, however now the icons were mirrored an appear twice. How do I get rid of the first half and keep only the mirrored part?
3. margin to the right worked beautifully: Thanks
4. I cannot find the option x - theme option - woocommerce - navbar menu. I am not sure why.
5. I wanted to include a background image to the shop, is that possible?
6. margin archive page: still have to apply that one
7. single post entry wrap - this has not worked for the shop page, however now my podcast archive has changed the entry wrap, how can I undo that?

Thanks so much for your patience and your support!
Best!

[christian]

Hey @perisoylu,

Before I answer, please do note that custom coding is outside the scope of our support. We could point you to the right direction but if the custom code suggestions does not work in your site, you would need to consult with a third party developer.

1. It looks like you’ve added the px unit in the Cart Alignment field. You should only use the value.

2. The correct code for moving the cart icon before the search icon is this:

add_action( 'after_setup_theme', 'move_shop_cart_menu_icon', 99 );

function move_shop_cart_menu_icon() {
  remove_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9999, 2 );
  add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9998, 2 );
}

That should work as I’ve just tested it. If that does not work still on your end, you should forward this to a third party developer.

4. Are you not seeing this? In this case, there might be something causing an issue in your site. Would you mind switching to the parent theme?

5. There’s no shop page specific class being outputted so this is not easily possible.
6. The code was really for the single post. For single product, please use single-product instead of single-post

Hope that helps and thank you for understanding.

[perisoylu]

@christian_y: Thank you, yes it helped. There are still question marks when it comes to the customisation of the shop, however, some of them got resolved by writing it and I am grateful for that.

So thanks for your help!
Best,

[thai]

You’re welcome and thanks for understanding!