[Mary Beth MParticipant]

Hello there.

I’m trying to get a couple woocommerce icons in the header area. I don’t know why I’m having such a hard time with this, it seems like it should be pretty simple, so many apologies. I attached a screenshot of what I need to get it to look like.

I was able to get my own cart icon instead of the regular one by using this:

.x-cart .x-icon-shopping-cart:before {
content: ”;
background: url(‘/wp-content/uploads/2016/12/cart.png’) no-repeat center center;
background-size: contain;
width: 25px;
height: 45px;
margin: -3px 10px;
display: inline-block;
}

(not quite the right placement for it yet, but getting closer)

But how do I place other icons next to it?
just these two:
http://www.leemerritt.com/wp-content/uploads/2016/12/user.png
http://www.leemerritt.com/wp-content/uploads/2016/12/search.png

Before trying this method, I tried creating an area for them to replace the social media icon area(only in header not footer), I figured that might be easier for working with the mobile display. I was mostly unsuccessful.

I also tried turning the search on, moving that icon up, changing the icon to the one I want to use (totally worked up until this point) and then…. adding the “cart” and “user” icons next the new search icon…but…didn’t work.

Been trying to get this to work for like 3 days now, and usually after I’ve stared at something this long even the most basic errors don’t jump out at me, so figured would reach out to you guys. The site is in maintenance mode, so I’ll attach the login in a private message

Thank you for any help!

Mary Beth

[Mary Beth MParticipant]

This reply has been marked as private.

[Mary Beth MParticipant]

I have an additional question about the way a single product displays if you group two sub-items together, wasn’t sure if I should use a new feed or not though.

So this is what it looks like without styling:
http://www.leemerritt.com/product/elle-bikini

And this is what I thought it would look like:
https://www.vixpaulahermanny.com/bali-bia-tube-bikini

slight difference lol

I don’t even…I mean where do you start with… I can’t even think of how to formulate a question about that dumpster fire…

[Rue NelModerator]

Hello There,

Thanks for writing in! To add a custom menu icons in your site, since the child theme is already set up, please add the following code in your child theme’s functions.php file

// Displaying custom menu icons
// =============================================================================
function add_custom_menu_icons(){ ?>
  
	<div class="custom-menu">
	  <a href="#search" title="Search"><img src="http://www.leemerritt.com/wp-content/uploads/2016/12/search.png" alt="Search"></a>
	  <a href="#user" title="User"><img src="http://www.leemerritt.com/wp-content/uploads/2016/12/user.png" alt="User"></a>
	  <a href="#cart" title="Cart"><img src="http://www.leemerritt.com/wp-content/uploads/2016/12/cart.png" alt="Cart"></a>
	</div>

<?php }
add_action('x_after_view_global__brand', 'add_custom_menu_icons');
// =============================================================================

Feel fee to change the links of the respective icons.

And then please add the following css code in your child theme’s style.css

.custom-menu {
    float: right;
    margin: 20px;
}

.custom-menu img {
    max-width: 30px;
}

The example url is using a custom Woo template. You can check out how a product page looks like using Ethos stack in this demo: http://demo.theme.co/shop-ethos/product/ninja-silhouette-2/

In your site, it looks like the layout was messed up. Did you have any custom templates?

[Mary Beth MParticipant]

I didn’t add any no. Another developer grouped the product but I don’t particularly understand how he put it together. I guess there isn’t a plugin for woocommerce that will let you have 2 buttons like that like that so he wrote these.

Maybe there was/is an easier to way to accomplish having 2 product buttons. I switched to the Integrity stack temporarily so it would be easier to see the containers, and the left half of the first section is great, and the right half of the 2nd section is great, those two halves just should be next to each instead of oddly stacked. this is the basic layout we’re going for here (image left, buttons right) https://www.vixpaulahermanny.com/imperial-bia-tube-bikini

Not really sure what to do.

The fixing the header part worked great though! Thank you!

[Mary Beth MParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Regretfully 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. Thanks for understanding. Take care!

[Author]

Posts