Large Button in navigation and error message

[bluetroop2]

Hello X Team - Here is a page from a new site I’m working on… http://reaves.bluetroop.com/product/shirts-pants-blouses-dresses-sweaters-cleaning-and-or-restoration/.

I have two issues I need your help with. One item is that I keep getting this error message on all my WooCommerce product pages… “Warning: A non-numeric value encountered in /home3/bluetroop/reaves.bluetroop.com/wp-content/plugins/woocommerce/includes/wc-product-functions.php on line 903”. How do I address this??

Next, in the top navigation, I would like to make the “Order Now” selection really stand out, perhaps as a graphic button. Do you have some CSS code I could use to make that happen?

Thanks in advance.

[jade]

Hi @bluetroop2,

@bluetroop2

I have two issues I need your help with. One item is that I keep getting this error message on all my WooCommerce product pages… “Warning: A non-numeric value encountered in /home3/bluetroop/reaves.bluetroop.com/wp-content/plugins/woocommerce/includes/wc-product-functions.php on line 903”. How do I address this??

Were you able to get this sorted? I just checked the product pages on your site and the warning messages aren’t there anymore:

@bluetroop2

Next, in the top navigation, I would like to make the “Order Now” selection really stand out, perhaps as a graphic button. Do you have some CSS code I could use to make that happen?

You can add a class to the menu item then add a custom CSS to set a background color to that menu item.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to X > Theme Options > CSS then add this code:

.x-navbar .desktop .x-nav>li.highlight {
    background-color: green;
}

Feel free to change the value in the code above.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[bluetroop2]

@jade

.x-navbar .desktop .x-nav>li.highlight { background-color: green; }

The second CSS solution for the button looks really good. Thank you! I’ll see how the customer likes it. I’m stiil having trouble on the first item (the error message). Please see the attached graphic so I can show you where. I’m using Google Chrome.

[ruenel]

Hello @bluetroop2,

Thanks for updating in!
Please be advised that the X theme only supports up to WooCommerce 4.0. We are still yet to release an update that will support the latest version of the plugin. Meanwhile, you are seeing a PHP Warning because a certain variable is null or not yet set. Please disable your debug mode to get rid of the PHP warning message. You can do this by opening wp-config.php and adding

define('WP_DEBUG', false);

/* That's all, stop editing! Happy blogging. */

When you revisit the page, you should no longer be seeing the message.

Hope this helps.

[bluetroop2]

Okay, I got rid of the error message, but now I would like to replace the “Order Now” highlighted button with a graphic image I will create. Can you please send me the code I can use for the ‘hover’ and ‘off’ states of the image that I will create. Thank you, team!!

[christian]

Hey @bluetroop2,

You’d need to learn CSS to be able to achieve that. You can learn the hover here https://www.w3schools.com/cssref/sel_hover.asp. You can apply that to the CSS Jade provided previously as a starting point.

Please note that we do not write custom code as part of our product support. If you’re not familiar with CSS, I’d recommend you upgrade to Pro so you’ll be able to achieve what you need without custom coding.

If you’re interested with custom coding and want to be guided by us, you might want to subscribe to our One plan.

Hope that helps and thank you for understanding.

[bluetroop2]

I don’t think it would be custom coding. Do you know the code i would use to interact with the Navigation bar in X. You don’t support your own theme? People buy your theme and work with your team so we don’t have to write custom code. I have two graphics for the button - an On state and an Off state. What CSS would I use to replace the Order Now selection on the navigation bar.

[friech]

Hi @bluetroop2,

Sorry about that, but please do mind that the standard header (of X) is not natively capable of what you’re asking, so it would require customization (custom code) which is outside of the support that we can offer.

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

First, to replace the “Order Now” with an image, you need to edit your menu and replace the “Order Now” Navigation Label, with an image tag code.

e.g.

<img class="btn-custom-order" src="IMAGE URL HERE" />

You might still need to apply a custom CSS on this image though to make your image look fit on the menu container. You can use that class btn-custom-order as a selector to apply a custom CSS on the image.

Next is the hover effect, there are a couple of ways to achieve this but all require custom code. First is via custom CSS, but for this to work, your initial image should cover the hover image, so you need to apply your hover image as a background-image, then apply an opacity: 0; on the image once its being hover, that way the initial image will become transparent/invisible and the background image become visible. See examples here.

Another approach is via custom JS, utilizing the mouseenter() and mouseleave() function couple with attr() function to replace the image src URL base on those two event.

• Set the mouseover Attribute of a div using JQuery
• jQuery attr()

If you are more interested in having more options over all aspects of the header (and footer) I suggest that you consider the Pro theme which has a Header and Footer Builder.

Cheers!

[bluetroop2]

Thank you. This response was more helpful. I’ll take it from here.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.