Some problems with product display

  • 1nalex2014

    (@1nalex2014)


    8 years, 7 months ago

    Hello! The picture shows that the word “Add to cart” (in Ukrainian) does not fit in the button space. The second word “Quick View” is placed completely in English, but if I translate it into my language, it also does not fit. How can I replace the above words with fa-shopping-cart icons and, accordingly, fa-eye?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author UXL Themes

    (@uxl)

    8 years, 7 months ago

    You could try this custom CSS added in the customizer > Additional CSS:

    .woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart{
max-width: 40px;
color: transparent;
}

.woocommerce ul.products li.product .button.add_to_cart_button:after,
.woocommerce ul.products li.product a.added_to_cart:after{
font-family: 'FontAwesome';
content: '\f07a';
color: #fff;
position: absolute;
left: 12px;
}

    This is for the ‘Add to Cart’ button but I’m not certain what plugin you are using for the ‘Quick View’ button??

    or if you would prefer to make the button wider so both add to cart & quick view may fit, add this css:

    .woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce a.added_to_cart{
right: 1%;
width: 98%;
}
    • This reply was modified 8 years, 7 months ago by UXL Themes. Reason: added extra info
    Thread Starter 1nalex2014

    (@1nalex2014)

    8 years, 7 months ago

    Thank you for your reply.
    I use your theme with the plugins you recommended. No more plug-ins I apply.

    Attempts to change something on your recommendations did not bring anything positive.

    The first example hides the “Add to cart”, only the “Quick View”

    The second example is here in the photo:
    Here is an example of the application:

    .woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce a.added_to_cart{
right: 1%;
width: 98%;
}

    http://prntscr.com/gth1v8

    I tried different options – first, second and both together.

    I would like to replace words with icons fa-shopping-cart and fa-eye. These changes need to be made in plug-ins, in their settings?

    Theme Author UXL Themes

    (@uxl)

    8 years, 7 months ago

    In the screenshot I initially thought that you had ‘add to cart’ and ‘quick view’ text side-by-side in the same button, and now on second look it seems like the quick view button is a different button and is being rendered in the same space and layered over the top of the standard add to cart button.

    The Quick View button is not part of the theme, and it is not part of WooCommerce on it’s own, so there will be a plugin that is generating the Quick View button.

    Can you let me know what plugins you are running on your site?
    In your dashboard go to WooCommerce > Status and reply here with the list of Active plugins

    Thread Starter 1nalex2014

    (@1nalex2014)

    8 years, 7 months ago

    At the moment everything is displayed, as in the beginning, because I removed the codes that you recommended to me. Now the abbreviated word “Add to cart” and another “Quick view” in one line are displayed.
    http://prntscr.com/gt7f8l

    Active plugins

    Black Studio TinyMCE Widget	 	от Black Studio – 2.5.1
Child Theme Configurator	 	от Lilaea Media – 2.2.8.1
Elementor	 	от Elementor.com – 1.7.11
GeoIP Detection	 	от Yellow Tree (Benjamin Pick) – 2.7.0
Loco	 	от Tim Whitlock – 2.0.15
WooCommerce Grid / List toggle	 	от jameskoster – 1.1.0
WooCommerce	 	от Automattic – 3.1.2
WP Translitera	 	от Evgen Yurchenko – p1.0.3
YITH WooCommerce Ajax Product Filter	 	от YITHEMES – 3.4.4
YITH WooCommerce Compare	 	от YITHEMES – 2.2.1
YITH WooCommerce Quick View	 	от YITHEMES – 1.2.1
YITH WooCommerce Wishlist	 	от YITHEMES – 2.1.2
    Theme Author UXL Themes

    (@uxl)

    8 years, 7 months ago

    Thank you. It is YITH WooCommerce Quick View plugin.


    To make quick view button below add to cart button:

    .woocommerce ul.products li.product .yith-wcqv-button{
top: 60%;
}

    or

    to display icons instead of text:

    .woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product a.added_to_cart{
right: 60px;
max-width: 40px;
color: transparent;
}

.woocommerce ul.products li.product .button.add_to_cart_button:after,
.woocommerce ul.products li.product a.added_to_cart:after{
font-family: 'FontAwesome';
content: '\f07a';
color: #fff;
position: absolute;
left: 12px;
}

.woocommerce ul.products li.product .yith-wcqv-button{
right: 10px;
max-width: 40px;
color: transparent;
}

.woocommerce ul.products li.product .yith-wcqv-button:after{
font-family: 'FontAwesome';
content: '\f06e';
color: #fff;
position: absolute;
left: 12px;
}
    Thread Starter 1nalex2014

    (@1nalex2014)

    8 years, 7 months ago

    I understand that you did not do your job. This did not apply to your template. But I really did not understand where it could be fixed. And you helped me. Many thanks! Good is your theme, it fits me completely!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Some problems with product display’ is closed to new replies.