Button Style

Hi @oliverroperuk,

It is certainly possible to customize the colors and other styles of buttons and other elements. However, apart from the “Change” link buttons for each substep, Fluid Checkout does not apply styles to buttons so that the checkout page looks more like your website.

These colors are probably coming from the theme you are using.

Could you provide the URL of the website you want to customize or tell me the name of the theme?

Best,
Diego

Hi @oliverroperuk,

The theme does not support styles for normal .button elements but adds styles to each button type specifically.

At the moment I can’t focus on adding support for the theme you are using, however, you can use the code snippet below that is tailored specifically to your website.

It will also fix 2 other style issues: one for the spacing on the shipping methods, and another for the product quantity on the order summary.

Add this code snippet in the Advanced CSS field of the Customizer at “WP Admin > Appearance > Customize”, then “Advanced CSS” tab:

.fc-wrapper .button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0;
    font-family: inherit;
    font-size: 11px;
    line-height: 2em;
    letter-spacing: .2em;
    font-weight: 500;
    text-transform: uppercase;
    outline: 0;
    box-sizing: border-box;
    -webkit-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;
    padding: 14px 58px;
    color: #fff;
    background-color: #fbb1bd;
    border: none;
    cursor: pointer;
    z-index: 3;
}

.fc-wrapper .fc-shipping-method__packages input.shipping_method[type=radio] {
    position: absolute;
}

body form.woocommerce-checkout .fc-wrapper #order_review table.woocommerce-checkout-review-order-table .product-quantity {
    padding-top: 5px;
}

If you can’t get this to work, I suggest you hire a developer to make this customization for you.

Also, while your website is not done yet, I noticed it is pretty slow. This is probably because of the size of the images you are using but could be something else too.

Cheers,
Diego

Hi @oliverroperuk,

If you haven’t yet, I would really appreciate it if you could spare a few minutes to write a review about our plugin 🙂
Here is a fast link to the review form:
https://ww.wp.xz.cn/support/plugin/fluid-checkout/reviews/#new-post

Best,
Diego