Gullhuset - working on product cards with Lovable and Claude and ChatGPT

Gullhuset WooCommerce Integration - Clean Version.php

add_action('wp_enqueue_scripts', function() {

    wp_register_style('lovable-product-cards', false);
    wp_enqueue_style('lovable-product-cards');

    $css = <<<CSS
/* Product Grid */
ul.products,
ul.wp-block-products,
div.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    padding: 2rem !important;
    margin: 0 auto !important;
}

/* Product Card */
li.product {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    min-height: 380px !important;
    background: #fff !important;
    border-radius: 12px !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-bottom: 1rem !important;
    box-sizing: border-box !important;
    margin: 0.2rem !important;
}

/* Product Title */
li.product .woocommerce-loop-product__title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 1rem 1.25rem 0.5rem !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.8rem !important;
}

/* Price */
li.product .price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #d4af37 !important;
    margin: 0 1rem 0.5rem !important;
}

/* Add to Cart Button */
li.product .add_to_cart_button,
li.product .product_type_simple,
li.product .product_type_variable {
    background: linear-gradient(135deg, #d4af37, #f0c674) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 1.25rem !important;
    text-align: center !important;
    box-shadow: 0 8px 15px rgba(212,175,55,0.3) !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: all 0.4s cubic-bezier(.4,0,.2,1) !important;
}

/* Hover effects: show button, glow, scale */
li.product:hover .add_to_cart_button,
li.product:hover .product_type_simple,
li.product:hover .product_type_variable {
    opacity: 1 !important;
    transform: translateY(0) scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5) !important;
}

/* Product Description Hover Color */
li.product:hover .woocommerce-loop-product__excerpt {
    color: #d4af37 !important;
}

/* Sticky header */
header:has(>.is-position-sticky) {
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--height, 0px ) );
	z-index: 100;
}

@media (max-width: 600px) {
	header:has(>.is-position-sticky) {
		top: 0;
	}
}

/* Responsive Layout */
@media (max-width: 1024px) {
    li.product {
        flex: 0 0 calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
    }
}
@media (max-width: 768px) {
    li.product {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

CSS;

    wp_add_inline_style('lovable-product-cards', $css);

});

An update or the same?

`/**

• Gullhuset WooCommerce Integration - Simplified
• Add this to your theme's functions.php or use in a code snippet plugin
• Uses WooCommerce defaults with custom styling
  */

function gullhuset_wc_products_shortcode($atts) {
// Shortcode attributes
$atts = shortcode_atts(array(
'limit' => 6,
'columns' => 3,
'orderby' => 'menu_order',
'order' => 'ASC',
'ids' => '',
'skus' => '',
'category' => '',
'tag' => '',
'class' => '',
'on_sale' => false,
'best_selling' => false,
'top_rated' => false
), $atts, 'gullhuset_products');

// Build WooCommerce products shortcode attributes
$wc_atts = array(
    'limit' => $atts['limit'],
    'columns' => $atts['columns'],
    'orderby' => $atts['orderby'],
    'order' => $atts['order']
);

// Add conditional attributes
if (!empty($atts['ids'])) $wc_atts['ids'] = $atts['ids'];
if (!empty($atts['skus'])) $wc_atts['skus'] = $atts['skus'];
if (!empty($atts['category'])) $wc_atts['category'] = $atts['category'];
if (!empty($atts['tag'])) $wc_atts['tag'] = $atts['tag'];
if (!empty($atts['class'])) $wc_atts['class'] = $atts['class'];
if ($atts['on_sale']) $wc_atts['on_sale'] = 'true';
if ($atts['best_selling']) $wc_atts['best_selling'] = 'true';
if ($atts['top_rated']) $wc_atts['top_rated'] = 'true';

// Build shortcode string
$shortcode_string = '[products';
foreach ($wc_atts as $key => $value) {
    $shortcode_string .= " {$key}=\"{$value}\"";
}
$shortcode_string .= ']';

// Wrap in our custom styling container
ob_start();
?>
<div class="gullhuset-wc-products-wrapper">
    <?php echo do_shortcode($shortcode_string); ?>
</div>
<?php
return ob_get_clean();

}

// Register shortcode
add_shortcode('gullhuset_products', 'gullhuset_wc_products_shortcode');

// Add custom body class when our shortcode is used OR on WooCommerce pages
function gullhuset_add_body_class($classes) {
global $post;

// Add class for shortcode usage
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'gullhuset_products')) {
    $classes[] = 'gullhuset-styling-active';
}

// Add class for all WooCommerce shop pages including main shop page
if (function_exists('is_woocommerce') && (is_shop() || is_product_category() || is_product_tag() || is_product() || is_woocommerce())) {
    $classes[] = 'gullhuset-styling-active';
}

return $classes;

}
add_filter('body_class', 'gullhuset_add_body_class');

// Enqueue our custom styles
function gullhuset_enqueue_wc_styles() {
// Always enqueue on WooCommerce pages to ensure shop page styling works
if (function_exists('is_woocommerce') && (is_shop() || is_product_category() || is_product_tag() || is_product() || is_woocommerce())) {

    // Add the Gullhuset styling inline
    $gullhuset_css = '
    /* Gullhuset WooCommerce Styling */
    body.gullhuset-styling-active .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 20px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 20px !important;
    }
    
    body.gullhuset-styling-active .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        background: white !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }
    
    body.gullhuset-styling-active .woocommerce ul.products li.product:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    }
    
    body.gullhuset-styling-active .woocommerce ul.products li.product .button {
        background: linear-gradient(135deg, #D4AF37, #F4E4BC) !important;
        color: #2C1810 !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 24px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: all 0.3s ease !important;
        opacity: 0 !important;
        transform: translateY(20px) !important;
        margin-top: 10px !important;
    }
    
    body.gullhuset-styling-active .woocommerce ul.products li.product:hover .button {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    body.gullhuset-styling-active .woocommerce ul.products li.product .button:hover {
        background: linear-gradient(135deg, #F4E4BC, #D4AF37) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
    }
    ';
    
    wp_add_inline_style('woocommerce-general', $gullhuset_css);
}

// Also check for shortcode usage
global $post;
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'gullhuset_products')) {
    wp_add_inline_style('woocommerce-general', $gullhuset_css);
}

}
add_action('wp_enqueue_scripts', 'gullhuset_enqueue_wc_styles');
`

Original version

/**

• Gullhuset WooCommerce Integration - Clean Version
• Add this to your theme's functions.php or use in a code snippet plugin
• Uses WooCommerce defaults with external CSS styling (no inline CSS conflicts)
  */

function gullhuset_wc_products_shortcode($atts) {
// Shortcode attributes
$atts = shortcode_atts(array(
'limit' => 6,
'columns' => 3,
'orderby' => 'menu_order',
'order' => 'ASC',
'ids' => '',
'skus' => '',
'category' => '',
'tag' => '',
'class' => '',
'on_sale' => false,
'best_selling' => false,
'top_rated' => false
), $atts, 'gullhuset_products');

// Build WooCommerce products shortcode attributes
$wc_atts = array(
    'limit' => $atts['limit'],
    'columns' => $atts['columns'],
    'orderby' => $atts['orderby'],
    'order' => $atts['order']
);

// Add conditional attributes
if (!empty($atts['ids'])) $wc_atts['ids'] = $atts['ids'];
if (!empty($atts['skus'])) $wc_atts['skus'] = $atts['skus'];
if (!empty($atts['category'])) $wc_atts['category'] = $atts['category'];
if (!empty($atts['tag'])) $wc_atts['tag'] = $atts['tag'];
if (!empty($atts['class'])) $wc_atts['class'] = $atts['class'];
if ($atts['on_sale']) $wc_atts['on_sale'] = 'true';
if ($atts['best_selling']) $wc_atts['best_selling'] = 'true';
if ($atts['top_rated']) $wc_atts['top_rated'] = 'true';

// Build shortcode string
$shortcode_string = '[products';
foreach ($wc_atts as $key => $value) {
    $shortcode_string .= " {$key}=\"{$value}\"";
}
$shortcode_string .= ']';

// Wrap in our custom styling container
ob_start();
?>
<div class="gullhuset-wc-products-wrapper">
    <?php echo do_shortcode($shortcode_string); ?>
</div>
<?php
return ob_get_clean();

}

// Register shortcode
add_shortcode('gullhuset_products', 'gullhuset_wc_products_shortcode');

// Add custom body class when our shortcode is used OR on WooCommerce pages
function gullhuset_add_body_class($classes) {
global $post;

// Add class for shortcode usage
if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'gullhuset_products')) {
    $classes[] = 'gullhuset-styling-active';
}

// Add class for all WooCommerce shop pages including main shop page
if (function_exists('is_woocommerce') && (is_shop() || is_product_category() || is_product_tag() || is_product() || is_woocommerce())) {
    $classes[] = 'gullhuset-styling-active';
}

return $classes;

}
add_filter('body_class', 'gullhuset_add_body_class');

// Note: CSS styling should be added separately via woocommerce-gullhuset-styles.css
// This version removes inline CSS to prevent conflicts with external stylesheets