Archives

Home Forums Search Search Results for 'woo-content-wrap'

Search Results for 'woo-content-wrap'

Home Forums Search Search Results for 'woo-content-wrap'

Viewing 11 results - 1 through 11 (of 11 total)
  • Author
    Search Results
  • #2044725
    Paul

    Yes, now we got the culprit. When I deactivate this code, then the cross-sells on the cart page are fine:

    /**
     * Woo Commerce Shop Wrapper
     */
    add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
    add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);
    
    function woo_shop_loop_item_open_wrapper() {
        echo '<div class="woo-content-wrap">';
    }
    function woo_shop_loop_item_close_wrapper() {
        echo '</div>';
    }
    

    However what happens then is that the Add-to-cart-button is left-aligned and not centered.

    I left the code activated for now because the site is live, but just tell me if I should deactivate it.

    #2044672
    David
    Staff
    Customer Support

    Hmmm… so its not that function thats a problem. You can re-enable that.
    What else do we have ? Theres the function thats adding the woo-content-wrap – what if you disable that ?

    Sorry its trial an error – theres basically some broken HTML being added to those ( and only those ) products.

    #2043939
    David
    Staff
    Customer Support

    Try this CSS:

    /* Set fixed space between Image and content *./
    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        margin-bottom: 5px;
    }
    /* Force content to fill height of product grid */
    .woo-content-wrap {
        flex: 1;
        display: flex;
        flex-direction: column; 
    }
    /* Center button */
    .woocommerce ul.products li.product .woo-content-wrap .button {
        margin: unset;
    }
    /* Auto space above to price to keep price and buttons aligned */
    .woocommerce ul.products li.product .price {
        margin-top: auto;
    }
    #2043782
    Paul

    This is the code you gave me:

    /*Add authors name from attributes on product page*/
    add_action( 'woocommerce_single_product_summary', 'wc_show_attribute_links',5);
    add_action( 'woocommerce_shop_loop_item_title', 'wc_show_attribute_links',9);
    
    function wc_show_attribute_links() {
    	global $post;
    	$attribute_names = array( 'pa_autor' );
    		
    	foreach ( $attribute_names as $attribute_name ) {
    		$taxonomy = get_taxonomy( $attribute_name );
    		
    		if ( $taxonomy && ! is_wp_error( $taxonomy ) ) {
    			$terms = wp_get_post_terms( $post->ID, $attribute_name );
    			$terms_array = array();
    		
    	        if ( ! empty( $terms ) ) {
    		        foreach ( $terms as $term ) {
    			       $archive_link = get_term_link( $term->slug, $attribute_name );
    			       $full_line = '<a class="autor-link" href="' . $archive_link . '">'. $term->name . '</a>';
    			       array_push( $terms_array, $full_line );
    		        }
    		        echo implode( $terms_array, ', ' );
    	        }
        	}
        }
    	}
    
    /**
     * Woo Commerce Shop Wrapper
     */
    add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
    add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);
    
    function woo_shop_loop_item_open_wrapper() {
        echo '<div class="woo-content-wrap">';
    }
    function woo_shop_loop_item_close_wrapper() {
        echo '</div>';
    }

    It would be good to be able to keep the comma, since otherwise it may seem as if the two names are one, but I’m afraid I don’t know how to add an extra wrapper. :-/

    #2021317
    David
    Staff
    Customer Support

    Most of the elements have auto margins, so you should just need to make the woo-content-wrap into a flex column like so:

    .woo-content-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    #2020206
    nik9

    Hello David,

    Thanks. This is now my current setting.. but I font see any row there now. Do I have to hook that row now in? Didn’t get that.. 🙂

    //add the icon {CSS}
    a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:after {
      content: "\f07a";
      font-family: 'FontAwesome';
    	font-size: 15px;
    	padding: 7px 12px 7px 12px;
     	color: white;
    	background: #333;
    	border-radius: 5px
    }
    remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 15 );
    
    //remove the text {PHP}
    add_filter( 'woocommerce_product_add_to_cart_text', 'change_text_woo' );
    function change_text_woo() {
    		return;
    }
    
    add_action( 'woocommerce_after_shop_loop_item_title', function(){
        // Open wrapper and for price review add2cart row
        // inner wrap for just price and review
        echo '<div class="price-cart-row"><div class="price-review-block">';
        
    }, 9 );
    
    add_action( 'woocommerce_after_shop_loop_item_title', function(){
        // close wrap for price and review
        echo '</div>';
    }, 16 );
    
    add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
    add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);
    
    function woo_shop_loop_item_open_wrapper() {
        echo '<div class="woo-content-wrap">';
    }
    function woo_shop_loop_item_close_wrapper() {
        echo '</div></div>';
    }
    
    #1994944
    David
    Staff
    Customer Support

    Hi there,

    it is doable, may take a little PHP and some CSS but can’t see anything too problematic.

    To begin with – this PHP Snippet will give us the wrapper we need around our summary/meta/add-to-cart:

    add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
    add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);
    
    function woo_shop_loop_item_open_wrapper() {
        echo '<div class="woo-content-wrap">';
    }
    function woo_shop_loop_item_close_wrapper() {
        echo '</div>';
    }

    Then a little CSS to create the summary wrap | image row layout:

    #wc-column-container .product {
        flex-direction: row-reverse;
    }
    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        flex: 0 0 200px;
        margin-left: 20px;
    }

    If you can test that with your other meta etc. added to the site i can take a look at the other styling adjustments you need.

    #1636814
    David
    Staff
    Customer Support

    Why not just string your CSS selectors eg.

    .your-custom-class-added-by-function .woo-content-wrap {
        /* Styles */
    }
    #1636755
    nik9

    Thanks David!

    Now I have a fully working php snipped (see code below). Now I only have problems to style the background from a product card.

    We want to:
    – Style the border (WORKS)
    – Style the background (DOES NOT WORK)

    I know that we made some adjustments with the products listing: https://generatepress.com/forums/search/woo-content-wrap/

    We use a white background for our woo-content-wrap class (We can not change that). So then I have to adjust also the background color from woo-content-wrap when special style is activated.

    How can I add a class to the <div class="woo-content-wrap"></div>?

    // Add checkbox
    function action_woocommerce_product_general_options_product_style_listing_data() {
        // Checkbox
        woocommerce_wp_checkbox( array( 
            'id'             => '_special_product_listing_style', // Required, it's the meta_key for storing the value (is checked or not)
            'label'          => __( 'Special style', 'woocommerce' ), // Text in the editor label
            'desc_tip'       => false, // true or false, show description directly or as tooltip
            'description'    => __( 'Promote a product by changing the style of the product card', 'woocommerce' ) // Provide something useful here
        ) );
    }
    add_action( 'woocommerce_product_options_general_product_data', 'action_woocommerce_product_general_options_product_style_listing_data', 10, 0 );
            
    // Save Field
    function action_woocommerce_product_general_options_product_style_listing_save( $product ) {
        // Isset, yes or no
        $checkbox = isset( $_POST['_special_product_listing_style'] ) ? 'yes' : 'no';
    
        // Update meta
        $product->update_meta_data( '_special_product_listing_style', $checkbox );
    }
    add_action( 'woocommerce_admin_process_product_object', 'action_woocommerce_product_general_options_product_style_listing_save', 10, 1 );
    
    // Is_special style
    function filter_woocommerce_post_class( $classes, $product ) {
        $spls = $product->get_meta( '_special_product_listing_style' );
        
        if ( $spls == 'yes' ) {
            $classes[] = 'custom-product-listing-class';
        }
        
        return $classes;
    }
    add_filter( 'woocommerce_post_class', 'filter_woocommerce_post_class', 10, 2 );
    #1567777
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this a shot:

    .woo-content-wrap {
        padding: 15px;
        background: #efefef;
        position: relative;
    }
    
    .woocommerce ul.products li.product .button.add_to_cart_button {
        position: absolute;
        left: 10px;
        right: 10px;
        width: auto;
    }
    #1560055
    David
    Staff
    Customer Support

    The Niche Hover effect uses the CSS transform translate property – which means the button, whether it be visible or not will always occupy ‘space’ on the page. So getting rid of the extra gap is tricky.

    However, to make the card style effect easier and something you can then tweak you can wrap the Shop items content so you effectively have a div for the image, and a div containing all other content including the button. This PHP Snippet will do that:

    add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
    add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);
    
    function woo_shop_loop_item_open_wrapper() {
        echo '<div class="woo-content-wrap">';
    }
    function woo_shop_loop_item_close_wrapper() {
        echo '</div>';
    }

    Now you can add padding and a background color to the woo-content-wrap element. And the Button will be included inside that.

Viewing 11 results - 1 through 11 (of 11 total)