Custom CSS & JavaScript
For advanced users, you can add custom styling and functionality:
/* Custom Sidecart Styling */
.wcp-sidecart {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-radius: 10px 0 0 10px;
}
.wcp-sidecart-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
}
.wcp-sidecart-item {
transition: all 0.3s ease;
}
.wcp-sidecart-item:hover {
background-color: #f8fafc;
transform: translateX(5px);
}
JavaScript Hooks
Use these JavaScript events to customize sidecart behavior:
// Sidecart Events
jQuery(document).on('wcp_sidecart_opened', function() {
console.log('Sidecart opened');
// Your custom code here
});
jQuery(document).on('wcp_sidecart_closed', function() {
console.log('Sidecart closed');
// Your custom code here
});
jQuery(document).on('wcp_sidecart_item_added', function(event, product_id) {
console.log('Product added:', product_id);
// Track with analytics
});
