Home Forums WoodMart support forum Some minor fixes

Some minor fixes

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #22223

    faheem ahmed
    Participant

    Hi admin
    I’ve bought your theme as discussed in the comments. Recently I’m working on one of my project with a different theme. I want to use your theme on that project. I only want to ask one thing that is about the orientation of the products in category mode (on shop page).

    http://buyaz.ca/shop/

    After purchase is it possible that you can provide me the code to present products in this way as they are appearing on the above given address. You can visit the above mentioned website on both computer and mobile devices. Following are some points about this orientation.

    1. Product name appears in 1st two lines only on all devices.
    2. Price float left on 3rd line and star rating on right side.
    3. On mobile when we touch any where on image then it leads to “Quick View” window but on computer when we hover mouse over image then 2 buttons of “Quick View” and “Add to cart/Select options” appears.
    4. The heart sing of “Wish List” appears over image when we bring mouse cursor over image but on mobile devices it appears in front of product name all the time. (But I also like as it is appearing on your demos on image all the time).

    I’ll wait for your response.
    Regards faheem

    #22243

    Artem Temos
    Keymaster

    Hello,

    Thank you for choosing our theme and contacting us.

    Firstly, you will need to choose “Icons on hover” product style in Theme Settings -> Shop.
    Then add the following CSS code to the Custom CSS field for desktop devices in Theme Settings -> Custom CSS

    .woodmart-hover-icons {
        display:flex;
        flex-wrap:wrap;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .woodmart-hover-icons > div,
    .woodmart-hover-icons > h3,
    .woodmart-hover-icons > span {
        flex:1 1 100%;
        max-width:100%;
    }
    .woodmart-hover-icons .star-rating {
        flex: 0 0 auto;
        max-width: auto;
    }
    .woodmart-hover-icons .price {
        flex: 1 0 auto;
        max-width: auto;
        text-align:left;
    }
    .woodmart-hover-icons h3.product-title {
        line-height:20px;
        max-height:40px;
        overflow: hidden;
    }

    This one for mobile devices

    .woodmart-hover-icons .price {
        flex:1 1 100%;
        max-width:100%;
        text-align:center;
    }

    And this snippet to the Custom JS

    jQuery(document).ready(function() {
    	
    	if( jQuery(window).width() > 768 ) return;
    	jQuery(document).on('click', '.product-element-top > a', function(e) {
    		e.preventDefault();
    		var $product = jQuery(this).parents('.product-grid-item');
    		$product.find('.open-quick-view').hide().trigger('click');
    		$product.addClass('loading-image');
    		$product.find('.open-quick-view').click();
    		setTimeout(function() {
    			$product.removeClass('loading-image');
    		}, 1500);
    	})
    });

    Kind Regards
    XTemos Studio

    #22247

    faheem ahmed
    Participant

    Thanks Admin
    I did as per your instructions. Large screen view looks nice but mobile view is not as I requested. Also quick view in not working on mobile view. Please visit the testing websites with the admin credentials below.

    #22256

    Artem Temos
    Keymaster

    Add this code for mobile devices to limit the product title

    .woodmart-hover-icons h3.product-title {
        line-height:20px;
        max-height:40px;
        overflow: hidden;
    }

    Wishlist icon is shown on the image and we think that it would be better to keep it there to fit the overall theme design.

    And we have fixed the quick view on your website.

    #22272

    faheem ahmed
    Participant

    Hi Artem Temos
    Thank you very much for such a support. Your theme looks very nice, attractive and is more than a best theme.
    Most of my issue have been resolved by your code but there are some points that require further help.

    1. I want to decrease the height of top bar to 25px.
    2. I’ve bordered the image to 1px. On some products the border at bottom does not appear! You can visit even on home page on Google Chrome, it appears normal on Edge browser.(print screen attached as w1)
    3. The “Rating Stars” does not appear properly on MS Edge browser but appears normal on google chrome.(print screen attached as w2)
    4. Most of my product images have brand logo on left corner and the “Shop sales label in percentage” hides that brand logo. So please move it to the right side.(print screen attached as w1)
    5. From the above provided code the “product name” and “price and rating stars” all appears nicely. On mobile view please do the same that “price and rating stars” also appears in the same 3rd line by resizing them to 10px. Also please move the “add to wish list” at the front of the product name as now on mobile view on a small image there are appearing 1 sales label and 2 icons which hide a large part of the image. (print screen attached as w3 for wish list button only to show its position)
    6. On mobile view on “Product Page” I want to show 2 “Related products” instead of 1 at a time.

    Thanks with the hope of your help
    Best Regards
    faheem

    Attachments:
    You must be logged in to view attached files.
    #22305

    Artem Temos
    Keymaster

    Hi,

    Here is a code snippet to place to the Global Custom CSS field

    
    /* height of top bar */
    div.topbar-wrapp,
    div.topbar-content {
        height:25px;
    }
    div.topbar-menu .item-level-0>a, 
    div.topbar-menu .menu>.menu-item-language>a {
        height:25px;
        line-height:25px;
    }
    /* border on image */
    .product-grid-item .product-image-link {
        padding: 1px;
    }
    /* star rating */
    .star-rating {
        text-align:left;
    }
    .star-rating span::before {
        white-space:nowrap;
    }
    /* labels */
    .woodmart-hover-icons div.labels-rectangular {
        left:auto;
        right:0;
    }

    This one for mobile and tablet devices only

    /* buttons */
    .woodmart-hover-icons div.woodmart-buttons {
        right: 6px;
    }
    .woodmart-hover-icons.sale div.woodmart-buttons {
        top: 45px;
    }
    .woodmart-hover-icons .woodmart-buttons div {
        margin-bottom:5px!important;
    }
    .woodmart-hover-icons.col-xs-6 .price {
        font-size:10px;
    }

    Find this snippet in your desktop custom CSS and move to global area to apply it for all devices

    .woodmart-hover-icons {
        display:flex;
        flex-wrap:wrap;
        flex-direction: row-reverse;
        justify-content: center;
    }
    .woodmart-hover-icons > div,
    .woodmart-hover-icons > h3,
    .woodmart-hover-icons > span {
        flex:1 1 100%;
        max-width:100%;
    }
    .woodmart-hover-icons .star-rating {
        flex: 0 0 auto;
        max-width: auto;
    }
    .woodmart-hover-icons .price {
        flex: 1 0 auto;
        max-width: auto;
        text-align:left;
    }

    And this one you should remove from mobile CSS

    .woodmart-hover-icons .price {
        flex:1 1 100%;
        max-width:100%;
        text-align:center;
    }

    5. Sorry, but we can’t move wishlist icon outside the image because of our theme structure.

    6. You can change it globally for all sliders only with this code snippet added to the functions.php file in the child theme

    	function woodmart_get_owl_items_numbers( $slides_per_view ) {
    		$items = array();
    		$items['desktop'] = ( $slides_per_view > 0 ) ? $slides_per_view : 1;
    		$items['desktop_small'] = ( $items['desktop'] > 1 ) ? $items['desktop'] - 1 : 1;
    		$items['tablet'] = ( $items['desktop_small'] > 1 ) ? $items['desktop_small'] : 1;
    		$items['mobile'] = 2;
    
    		return $items;
    	}

    Regards

    #22312

    faheem ahmed
    Participant

    Thank you so much for such a fast support. Now every thing looks nice. As you have described about the wishlist icon on image is due to the structure of the theme so its understandable.
    On mobile the top bar is ok but the icons are not vertically center aligned and are sitting on the base. Secondly please provide me the code to resize the rating stars on mobile devices to 11px as currently they are 14px.

    Thanks again

    #22328

    Artem Temos
    Keymaster

    Here is a fix for mobile devices

    div.topbar-right-text {
        height:25px;
    }
    .woodmart-hover-icons .star-rating {
        font-size: 11px;
        width: 63px;
    }
    .woodmart-hover-icons .star-rating span:before {
        font-size: 11px;
    }
    #22331

    faheem ahmed
    Participant

    Thanks Artem Temos
    You did a great job and provided me so much help. I’m going to rate your theme as 5 stars for such a great support and beautiful theme.

    #22342

    Artem Temos
    Keymaster

    Thank you very much for your positive feedback!

    Regards

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Some minor fixes’ is closed to new replies.