Color swatch outlines, borders, padding, quick view modification help!

Hi there,

1.Is there a way to add “outline” on color swatches like below? Without the “outlines,” I can’t really see light color swatches like white, beige on white background…

2. You know there is a “line” between Add to Cart button and Add to Wishlist as in demo: http://demo.xtemos.com/basel/shop/bags/nombined-strapped-backpack/

How can I add this “line” ABOVE and BELOW Product Short Description (aka single product excerpt)? Trying to achieve this look:

3. Is it possible to add some “padding” between the images and product summary on product detail page?

4. So I wanted to change the order of items on product summary, so I added below to child theme’s functions.php

remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 20 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 30 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 40 );
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );

Now, my quick view looks like this:

4A. How can I make the attributes (color swatch/size) “clickable/selectable”? Although the attributes appear, I can’t really “select” them (the default color/size is selected as default and can’t change), but I feel like this could be done since everything is already there…?

4B. How can I remove “select options” button and “product excerpt,” so I don’t show product short description on quick view?

Looking forward to hearing back from you!
Thank you in advance =)

Hello,

Here we go 🙂

1. Custom CSS to add border to color circles

.single-product-content .variations .swatches-select .colored-swatch {
border: 1px solid #000;
}

2. To add border lines

.single-product-content div[itemprop=description] {
    margin-bottom: 25px;
    border-top: 1px solid #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
    padding: 20px 0;
}

3. Padding for images

.single-product-content .product-images {
    position: relative;
    padding-right: 40px;
}

4. Sorry but you can’t use color swatches functionality (for variable products) on quick view. We don’t have a fix for this.

Hi there!

Thank you so much for your help! Everything worked out great!

1. I noticed that outline for color swatch only applies to product detail pages.
How can I add these outlines to all color swatches–the ones that appear on shop page filter (widget) and shop page (under product image)?

2. Regarding number 4, is there a better way to change the order of items on product detail page without affecting the default quick view setting (so no product excerpt appears as in the default quick view setting)? The way I changed seem to affect entire site–product detail page and quick view, and all I wanted to do is just change the order of contents on product detail page without affecting what appears on quick view..!

Also, I have a few more things that I need your help with…!
(Sorry to bother you a lot, but I’m nearly done..!!)

1. First, I noticed there is no “Shipping to Different Address” section even though your demo site contains that part.. How can I show this?

2. I would like to remove some padding on bottom of my footer (too much padding right now!)
Also, is there a way to show the “Sign Up” button on footer next to “Your email address,” instead of under it?

3. How can I add some space between two links? Adding space doesn’t seem to help.
I used this: <a hr.ef=#">Terms of Use</a> <a hr.ef=#">Privacy Policy</a>

1. Add this also

.swatch-on-grid.basel-tooltip, .basel-woocommerce-layered-nav .filter-swatch span {
    border: 1px solid #090909;
}

2. You can try to place your code in the top of the file content-single-product.php. Maybe this will help. We don’t have a quick instruction for this.

1. You can configure your site shipping in WooCommerce -> Settings -> Shipping.

2. We see that you added social icons to the last footer column with Visual Composer. Try to simply add shortcode [social_buttons]. And also add this CSS

.footer-container .widget-area {padding-bottom:0;}

3. You can add some ‘no break space’ symbols between theme like this <a></a> &nbsp;&nbsp;&nbsp;&nbsp; <a></a>

Hi there!

1. After adding the code for the padding under social icons on footer, the social icons are now located on center-right. How can I make it back to left-aligned?

2. There is a white bar padding between header and my first row of content (full width image) on home page. How can I remove this padding to the image begins right under the header?

3. I tried updating the theme using Easy Theme & Plugin Update plugin. I updated the Basel file, made “Yes” to updating an existing theme, but I got an error saying the folder already exists.. How can I update the theme now? I’ve always updated the theme using Easy Update plugin, so I don’t know how else to update…

4. How can I make the mobile three bar menu to left, so the mobile menu looks like
(Three bar menu icon on left) (Centered logo) (Wishlist heart button on right)(Shopping cart button on right)?

1. Try to change social buttons shortcode to this [social_buttons align="left"]

2. Add to this element row margin top -40px with Visual Composer.

3. It seems to be some problem with the plugin. You can ask their support what is wrong or try to upload theme update via FTP.

4. Sorry but this can’t be done with a few lines of code because of specific HTML structure, we don’t have an instruction for this.

Thanks for your reply.

Regarding #4, at least can you give me custom css code to make the slide appear on the right? You commented about it on Themeforest comment section that “This can be easily achieved with a few lines of custom CSS code”………..??

You can use this CSS code

.mobile-nav {
    right: 0;
    left: auto;
    transform: translate3d(270px,0,0);
    -webkit-transform: translate3d(270px,0,0);
    -ms-transform: translate3d(270px,0,0);
    -sand-transform: translate3d(270px,0,0);
}

[Author]

Posts