Slightly tricker that one ๐
1. Create a new Hook Element
Add this to the content:
<?php
$mobile_title = woocommerce_template_single_title();
echo $mobile_title;
?>
Hook = woocommerce_before_single_product
Check execute PHP
And set your display rules to Product > All Products
Then this CSS to switch which one displays for each device:
@media (max-width: 768px) {
.woocommerce.single-product .entry-summary .product_title {
display: none !important;
}
}
@media (min-width: 769px) {
.woocommerce.single-product .entry-content > .product_title {
display: none;
}
}