Woocommerce inline

[FERLAF]

Hello I would like:

To put Price in line and remove the line left. Thank you

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.single_variation_wrap {
    width: 100%;
}

.woocommerce-variation.single_variation {
    float: left;
}

.woocommerce-variation-add-to-cart {
    float: right;
}

.single-product .x-nav-tabs {
    border: none;
    box-shadow: none;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[FERLAF]

THANK YOU FOR YOU ANSWER AND THE INFORMATION.
.single-product .x-nav-tabs {
border: none;
box-shadow: none;
} i HAVE ALREADY GOT BUT NOT WORKING
tHANK YOU

[nabeel]

Hi again,

Try replacing the previous code with the following one:

.single-product .x-nav-tabs, .x-nav-tabs>li {
    border: none !important;
    box-shadow: none !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[FERLAF]

Hello I clear the cache and it is not working.
Thank you.

[paul.r]

Hi,

I checked in Theme Options > CSS and didn’t see the code getting added.

May I know where you have added the code that my colleague have provided.

Can you try this one.

.single-product .x-nav-tabs,
.single-product .x-nav-tabs>li {
    border: 0 !important;
    box-shadow: none !important;
}

Try adding it at the very top of Theme Options > CSS

Thanks

[FERLAF]

If I put the code
.single-product .x-nav-tabs,
.single-product .x-nav-tabs>li {
border: 0 !important;
box-shadow: none !important;
}
It is not working and there are another problema because there are a code of shadow:
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
font-size: 18px;
box-shadow: 0px 6px 0px 0px rgb(0, 161, 220);
border: none !important;
}
.x-nav-tabs > li > a {
font-size: 18px;
}
.x-tab-content {
background-color: #fafafa;
border: 1px solid #ddd;
line-height: 20px;
}

.x-tab-pane {
font-size: 18px;
}
.x-nav-tabs {
border: 0px;
}
.x-nav-tabs > li {
border-right: 0px;
}
This is all my code of this section.
Thank you.

[rad]

Hi @FERLAF,

May I know which page you’re currently working on? I checked on one of the product and it works well, there is no box shadow and the price is in line with the other options.

Thanks!

[FERLAF]

With Chrome is whatch well except the line of shadow, and with Edge is see the lines box.
Thank you

[rad]

Hi @FERLAF,

This is what I see on both Chrome and Edge,

Please provide the exact product URL you’re testing from your first screenshot.

Thanks!