Royah Marie

Thank you so much for that. I get this error when I try to save and activate:

Snippet automatically deactivated due to an error on line 2:

Cannot redeclare function woocommerce_variable_add_to_cart.

The good news is, I’m not crazy! Bad news is, here is the error:

Snippet automatically deactivated due to an error on line 6:

Syntax error, unexpected token “;”.

So rationally, there was only one “;” so I tried deleting it. Then it told me the error was now in Line 7 with “if.” I stopped there.

• This reply was modified 1 year, 6 months ago by Royah Marie.

Ok so it seems that the issue is only with products with variations (nearly all my products are now this way). Should the snippet be different for product variations to grab the description from the parent products? I am now seeing that on the invoices I am seeing values from the Custom Fields in my order page (where I manage the orders). The invoices did not grab this before. Thoughts?

That was awesome! Worked flawlessly. Thank you so much!

In my view it looks like the wishlist goes off the screen and you have to scroll to the right to see all the details are you saying in your view it is not the case?

Ultimately I do not want anyone to have to scroll to the right to see the wishlist. Ideally, a person should only have to scroll down and the table “adapts” to the device (so auto adjusting the height and width of each cell according to the device, so to speak).

Sorry, it seems I cannot edit my initial post. Here is the updated CSS for your review. Please ignore the one above.

/* header image on mobile */
@media screen and (max-width: 1363px) {
.site-header {
background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/Web-Mobile-Header-600×154-px.png);
}
}
@media screen and (max-width: 1363px) {
.site-header .site-branding img{ max-height: 175px !important; }
.site-header .site-branding img{ max-width: 200px !important; }
.site-header .custom-logo-link { display: flex; align-items: center; }
.site-header .site-branding {
background-repeat: no-repeat;
margin:0 auto;}
}
@media screen and (max-width: 1363px) { masthead {

background-size: cover;}
}

/* header image on desktop */
@media screen and (min-width: 1364px) {
.site-header {
background-image: url(https://staging1.delicatefabrics.net/wp-content/uploads/WebsiteHeader.png)}
}
@media screen and (min-width: 1364px) {
.site-header .site-branding img{ max-height: 175px !important; }
.site-header .site-branding img{ max-width: 200px !important; }
.site-header .custom-logo-link { display: flex; align-items: center; }
.site-header .site-branding {
background-repeat: no-repeat;
margin:0 auto;}
}
@media screen and (min-width: 1364px) { masthead {

background-size: cover;}
}

Hi, thank you so much for this information. I have determined that it was my modifications to the child theme that made it clunky. I did not know that making changes in the desktop view would not automatically scale to mobile.

I am becoming more familiar with CSS as I stumble my way through it, and finding the answers as I go. I was hoping there was an easier way but now I know that when designing my first website, design it in mobile view FIRST!

I appreciate your time and sharing all those resources.

Hi, @graphicdop I’m actually trying to do this same thing as the post you were trying to answer. I tried your CSS and it did not work for me. I’m currently working on my staging site and I would love to get this sorted before I publish to live.

I would like my contact form to adjust its width to fit mobile devices max-width: 768px

Please see: https://staging1.delicatefabrics.net/contact-us/

Thank you!

• This reply was modified 1 year, 7 months ago by Royah Marie.

Yes, I saw there were two snippets. One works fine. The other (pasted above) is the one I included your modification.

Or are you saying that both snippets need to be in ONE entry with the other one first?

Thank you so much for your help!

@babylon1999 Yes, this is exactly what I am trying to do! I added the snippet and the recommended change but here is the error:

Snippet automatically deactivated due to an error on line 2: Cannot redeclare function woocommerce_variable_add_to_cart.

Any idea how I can fix it?

function woocommerce_variable_add_to_cart(){
	global $product, $post;
    $variations = find_valid_variations();
 
    // Check if the special 'price_grid' meta is set, if it is, load the default template:
    if ( get_post_meta($post->ID, 'price_grid', true) ) {
        // Enqueue variation scripts
        wp_enqueue_script( 'wc-add-to-cart-variation' );
 
        // Load the template
        wc_get_template( 'single-product/add-to-cart/variable.php', array(
                'available_variations'  => $product->get_available_variations(),
                'attributes'            => $product->get_variation_attributes(),
                'selected_attributes'   => $product->get_variation_default_attributes()
            ) );
        return;
    }
 
    // Cool, lets do our own template!
    ?>
    <table class="variations variations-grid" cellspacing="0">
        <tbody>
            <?php
            foreach ($variations as $key => $value) {
                if( !$value['variation_is_visible'] ) continue;
            ?>
            <tr>
                <td>
                    <?php foreach($value['attributes'] as $key => $val ) {
						$val = str_replace(array('-','_'), ' ', $val);
				printf('<span class="attr attr-%s">%s</span>', $key, ucwords($val));} 
					?>
                                        </td>
                <td>
                    <?php echo $value['price_html'];?>
                </td>
                <td>
                    <?php if( $value['is_in_stock'] ) { ?>
                    <form class="cart" action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
                        <?php woocommerce_quantity_input(); ?>
                        <?php
                        if(!empty($value['attributes'])){
                            foreach ($value['attributes'] as $attr_key => $attr_value) {
                            ?>
                            <input type="hidden" name="<?php echo $attr_key?>" value="<?php echo $attr_value?>">
                            <?php
                            }
                        }
                        ?>
                        <button type="submit" class="single_add_to_cart_button btn btn-primary"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
                        <input type="hidden" name="variation_id" value="<?php echo $value['variation_id']?>" />
                        <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
                        <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />
                    </form>
                    <?php } else { ?>
                        <p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
                    <?php } ?>
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
    <?php
}

Ok, great. Thank you for checking that the code is correct. I definitely did not add CSS to hide it but I think I identified the problem. It only seems to be a sudden issue on certain imported (third-party) orders into WooCommerce. I really appreciate your time!

I appreciate your feedback but I don’t think your response directly answers my question. I’m locked into my current provider until March. So aside from that can you have a different theme for mobile or is there a way to make the settings for mobile view vastly different than my website settings?

I thought that by using a WooCommerce theme I would not have these issues. So for example, I thought that if I created a webpage where all my products display in say 4 columns on the web, that this would automatically optimize for mobile by maybe making it two columns or at least smaller pictures. None of that is currently happening and changing servers isn’t going to change that.

I’m noticing the same thing with my font sizes. My site just looks like garbage on mobile and I didn’t expect to now have to go in and add a million CSS codes to make it mobile friendly.

So this is why I was looking for a fast way to make my boutique theme design optimized for mobile because the alternative, going CSS by CSS, is making me want to cry.

Yes, it is missing on all packing slips.

Thank you so much. The length of time that it takes when you go from one page to another on mobile is MUCH longer than on the web. I have run several tests, to include Jetpack & other plugins, and they are all reporting the same thing.

I thought that buy using a WooCommerce theme I would not have these issues. So for example, I thought that if I created a webpage where all my products display in say 4 columns on the web, that this would automatically optimize for mobile by maybe making it two columns or at least smaller pictures.

I’m noticing the same thing with my font sizes. My site just looks like garbage on mobile and I didn’t expect to now have to go in and add a million CSS codes to make it mobile friendly.

So this is why I was looking for a fast way to make it optimized for mobile because the alternative, going CSS by CSS, is making me want to cry.

The link for the Community Slack (https://woocommerce.com/community-slack/) does not work. Do you know the updated page? I clicked on “Let’s go” and it said
—–
This link is no longer active

To join this workspace, you’ll need to ask the person who originally invited you for a new link.